<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="where" :label-col="{md: {span: 6}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 18}, sm: {span: 24}}">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="菜单名称:">
              <a-input v-model:value.trim="where.title" placeholder="请输入" allow-clear />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-modal v-model:visible="showEdit" :title="form.roadSoundId!==undefined?'修改用户':'添加用户'" :confirm-loading="loading"
        :width="1000" :body-style="{paddingBottom: '8px'}" @ok="save">
        <a-form ref="form" :model="form" :rules="rules" :label-col="{md: {span: 6}, sm: {span: 24}}"
          :wrapper-col="{md: {span: 18}, sm: {span: 24}}">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="日期" name="monitorDate">
                <a-date-picker v-model:value="form.monitorDate" :locale="locale" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="时间" name="monitorTime">
                <a-time-picker v-model:value="form.monitorTime" format="HH:mm" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="时段" name="timeSlot">
                <a-select v-model:value="form.timeSlot">
                  <a-select-option value="昼">昼</a-select-option>
                  <a-select-option value="夜">夜</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item label="测点名称" name="place">
                <a-input v-model:value="form.place" placeholder="请输入测点名称" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="点号" name="placeCode">
                <a-input v-model:value="form.placeCode" placeholder="请输入点号" allow-clear />
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item label="所属路段" name="road">
                <a-input v-model:value="form.road" placeholder="请输入测点名称" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="所属城区" name="area">
                <a-input v-model:value="form.area" placeholder="请输入点号" allow-clear />
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item label="路长" name="roadLength">
                <a-input v-model:value="form.roadLength" placeholder="请输入路长（米）" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="总路宽" name="roadWidth">
                <a-input v-model:value="form.roadWidth" placeholder="请输入总路宽（米）" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="中小型车流量" name="smallTrafficFlow">
                <a-input type="number" v-model:value="form.smallTrafficFlow" placeholder="请输入中小型车流量（辆/20分钟）"
                  allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="大型车流量" name="largeTrafficFlow">
                <a-input type="number" v-model:value="form.largeTrafficFlow" placeholder="请输入大型车流量（辆/20分钟）"
                  allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="LeqdB(A)" name="indexLeq">
                <a-input type="number" v-model:value="form.indexLeq" placeholder="请输入LeqdB(A)" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="SDdB(A)" name="indexSd">
                <a-input type="number" v-model:value="form.indexSd" placeholder="请输入大SDdB(A)" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="L10dB(A)" name="indexL10">
                <a-input type="number" v-model:value="form.indexL10" placeholder="请输入L10dB(A)" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="L50dB(A)" name="indexL50">
                <a-input type="number" v-model:value="form.indexL50" placeholder="请输入L50dB(A)" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="L90dB(A)" name="indexL90">
                <a-input type="number" v-model:value="form.indexL90" placeholder="请输入L90dB(A)" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="LmindB(A)" name="indexLmin">
                <a-input type="number" v-model:value="form.indexLmin" placeholder="请输入LmindB(A)" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="LmaxdB(A)" name="indexLmax">
                <a-input type="number" v-model:value="form.indexLmax" placeholder="请输入LmaxdB(A)" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>

        </a-form>

      </a-modal>
      <!-- 表格 -->
      <ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadSoundId" :datasource="url"
        :columns="columns" :where="where" :scroll="{x: 'max-content'}">
        <template #toolbar>
          <a-space>
            <a-button @click="openEdit" type="primary">新增</a-button>
            <a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
              ok-text="Yes" cancel-text="No" @confirm="removeBatch">
              <a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
            </a-popconfirm>

          </a-space>
        </template>

        <template #action="{ record }">
          <a-space>
            <a-button @click="openEdit(record)" type="primary" shape="round" size="small">修改</a-button>
            <a-popconfirm :title="`确认删除这条数据吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
              <a-button type="primary" danger shape="round" size="small">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
  import _ from "lodash"
  import {
    pageRoadSoundUrl,
    saveRoadSound,
    removeRoadSound,
    removeBatchRoadSound,
    updateRoadSound,
  } from "@/api/ecology/road_sound";
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import moment from 'moment';
  //   import utils from "./utils";
  export default {
    name: 'RoadSound',
    components: {},
    data() {
      const {
        billId
      } = this.$route.params

      return {
        locale,
        // 表格数据接口
        url: pageRoadSoundUrl,
        selection: [],
        // 表格列配置
        columns: [
        // {
        //      title: '序号',
        //     key: 'index',
        //     dataIndex: 'index',
        //     width: 48,
        //     align: 'center',
        //     customRender: ({
        //       index
        //     }) => index + 1
        //   },
          {
            title: '监测日期',
            dataIndex: 'monitorTime',
            sorter: true
          },
          {
            title: '测点名称',
            dataIndex: 'place',
            sorter: true
          },
          {
            title: '点号',
            dataIndex: 'placeCode',
            sorter: true
          },
          {
            title: '所属路段',
            dataIndex: 'road',
            sorter: true
          },
          {
            title: '所属城区',
            dataIndex: 'area',
            sorter: true
          },
          {
            title: '路长',
            dataIndex: 'roadLength',
            sorter: true
          },
          {
            title: '路宽',
            dataIndex: 'roadWidth',
            sorter: true
          },
          {
            title: '中小型车流量（辆/20分钟）',
            dataIndex: 'smallTrafficFlow',
            sorter: true
          },
          {
            title: '大型车流量（辆/20分钟）',
            dataIndex: 'largeTrafficFlow',
            sorter: true
          },
          {
            title: '时段',
            dataIndex: 'timeSlot',
            sorter: true
          },
          //   {
          //     title: '月',
          //     dataIndex: 'monitorMonth',
          //     sorter: true
          //   },
          //   {
          //     title: '日',
          //     dataIndex: 'monitorDay',
          //     sorter: true
          //   },
          //   {
          //     title: '时',
          //     dataIndex: 'monitorHour',
          //     sorter: true
          //   },
          //   {
          //     title: '分',
          //     dataIndex: 'monitorMinute',
          //     sorter: true
          //   },
          {
            title: 'LeqdB(A)',
            dataIndex: 'indexLeq',
            sorter: true
          },
          {
            title: 'SDdB(A)',
            dataIndex: 'indexSd',
            sorter: true
          },
          {
            title: 'L10dB(A)',
            dataIndex: 'indexL10',
            sorter: true
          },
          {
            title: 'L50dB(A)',
            dataIndex: 'indexL50',
            sorter: true
          },
          {
            title: 'L90dB(A)',
            dataIndex: 'indexL90',
            sorter: true
          },
          {
            title: 'LmindB(A)',
            dataIndex: 'indexLmin',
            sorter: true
          },
          {
            title: 'LmaxdB(A)',
            dataIndex: 'indexLmax',
            sorter: true
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            fixed: 'right',
            slots: {
              customRender: 'action'
            }
          }
        ],
        // 表格搜索条件
        roadSoundBillId: billId,
        where: {
          roadSoundBillId: billId
        },
        // 表格选中数据
        selectionList: [],
        // 是否显示编辑弹窗
        showEdit: false,
        // 表单数据
        form: {},
        loading: false,
        rules: {}

      };
    },
    methods: {
      /* 刷新表格 */
      reload() {
        console.log(this.$route);
        console.log(this.$router);
        this.$refs.table.reload({
          where: this.where
        });
      },
      /* 重置搜索 */
      reset() {
        this.where = {
          roadSoundBillId: this.roadSoundBillId
        };
        this.reload();
      },
      /* 显示编辑 */
      openEdit(record) {
        const cloneRecord = _.cloneDeep(record)
        if (record && cloneRecord.monitorTime) {
          console.log(moment(cloneRecord.monitorTime).format('YYYY MM DD'));
          cloneRecord.monitorDate = moment(cloneRecord.monitorTime);
          cloneRecord.monitorTime = moment(cloneRecord.monitorTime);
        }
        // cloneRecord.mi
        this.form = Object.assign({}, cloneRecord);
        this.showEdit = true;
        this.$nextTick(() => {
          this.$refs.form.clearValidate(); // 清除表单验证信息
        });
      },
    
      save() {
        const hide = this.$message.loading('请求中..', 0);
        const form = _.cloneDeep(this.form);
        const date = new Date();
        date.setFullYear(form.monitorDate.year());
        date.setMonth(form.monitorDate.month());
        date.setDate(form.monitorDate.date());
        date.setHours(form.monitorTime.hour());
        date.setMinutes(form.monitorTime.minutes());
        form.monitorTime = date.getTime();
        form.monitorYear = date.getFullYear();
        form.monitorMonth = date.getMonth() + 1;
        form.monitorDay = date.getDate();
        form.monitorHour = date.getHours();
        form.monitorMinute = date.getMinutes();
        delete form['monitorDate']
        if (form.roadSoundId) {
          updateRoadSound(form).then(res => {
            if (res.data.code == 0) {
            this.showEdit = false;
              this.$message.success(res.data.msg);
              this.reload();
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch((error)=>{
              this.$message.error(error.message);
          }).finally(()=>{
              console.log("finallyfinallyfinallyfinally");
              hide();
          })
        }else{
            form.roadSoundBillId = this.roadSoundBillId;
             saveRoadSound(form).then(res => {
            if (res.data.code == 0) {
                this.showEdit = false;
              this.$message.success(res.data.msg);
              this.reload();
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch((error)=>{
              this.$message.error(error.message);
          }).finally(()=>{
              hide();
          })
        }
       

      },
      /* 删除单个 */
      remove(row) {
        const hide = this.$message.loading('请求中..', 0);
        removeRoadSound(row.roadSoundId).then(res => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.$message.error(e.msg);
        }).finally(() => hide());
      },
      removeBatch() {
        const ids = this.selectionList.map(item => item.roadSoundId);
        const hide = this.$message.loading('请求中..', 0);
        removeBatchRoadSound(ids).then(res => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {

          this.$message.error(e.msg);
        }).finally(() => hide());
      },

    }
  }
</script>

<style scoped lang="less">
  
</style>