<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.place" placeholder="请输入测点名称" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="路段:">
              <a-input v-model:value.trim="where.function" placeholder="请输入路段名称" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="城区">
              <a-input v-model:value.trim="where.area" placeholder="请输入城区名称" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-modal v-model:visible="showEdit" :title="form.functionPlaceId!==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="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="motorwayLevel">
                <a-input v-model:value="form.motorwayLevel" placeholder="请输入道路等级" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="车道类别" name="motorwayType">
                <a-input v-model:value="form.motorwayType" placeholder="请输入车道类别" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="机动车车道数" name="motorway">
                <a-input v-model:value="form.motorway" placeholder="请输入机动车车道数" allow-clear />
              </a-form-item>
            </a-col>
             <a-col :md="12" :sm="24">
              <a-form-item label="测点参照物" name="refObj">
                <a-input v-model:value="form.refObj" placeholder="请输入测点测点参照物" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="测点经度" name="placeLng">
                <a-input type="number" v-model:value="form.placeLng" placeholder="请输入测点经度" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="测点纬度" name="placeLat">
                <a-input type="number" v-model:value="form.placeLat" placeholder="请输入测点纬度" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="道路覆盖人口" name="people">
                <a-input type="number" v-model:value="form.people" placeholder="请输入道路覆盖人口（万人）" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="监测站名" name="station">
                <a-input v-model:value="form.station" placeholder="请输入监测站名" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="监测仪器型号" name="monitorInstrumentModel">
                <a-input v-model:value="form.monitorInstrumentModel" placeholder="请输入监测仪器型号" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="监测仪器编号" name="monitorInstrumentCode">
                <a-input v-model:value="form.monitorInstrumentCode" placeholder="请输入监测仪器编号" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="监测前校准值" name="beforeMonitorValue">
                <a-input v-model:value="form.beforeMonitorValue" placeholder="请输入监测前校准值" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="监测后校准值" name="afterMonitorValue">
                <a-input v-model:value="form.afterMonitorValue" placeholder="请输入监测后校准值" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="声校准器测量声压值" name="soundPressureValue">
                <a-input v-model:value="form.soundPressureValue" placeholder="请输入声校准器测量声压值" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="声校准仪器型号" name="soundInstrumentModel">
                <a-input v-model:value="form.soundInstrumentModel" placeholder="请输入声校准仪器型号" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label="声校准仪器编号" name="soundInstrumentCode">
                <a-input v-model:value="form.soundInstrumentCode" placeholder="请输入声校准仪器编号" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>

        </a-form>

      </a-modal>
      <!-- 表格 -->
      <ele-pro-table v-model:selection="selectionList" ref="table" row-key="functionPlaceId" :datasource="url"
        :columns="columns" :where="where" :scroll="{x: 'max-content'}">
        <template v-if="bill.checked !=  1" #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 {
    pageFunctionPlaceUrl,
    saveFunctionPlace,
    removeFunctionPlace,
    removeBatchFunctionPlace,
    updateFunctionPlace,
    getFunctionPlaceBill
  } from "@/api/ecology/function-place";
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  //   import utils from "./utils";
  export default {
    components: {},
    data() {
      const {
        billId
      } = this.$route.params
      return {
        locale,
        bill:{},
        // 表格数据接口
        url: pageFunctionPlaceUrl,
        selection: [],
        // 表格列配置
        columns: [
      
          {
            title: '测点名称',
            dataIndex: 'place',
            sorter: true
          },
          {
            title: '测点经度',
            dataIndex: 'placeLng',
            sorter: true
          },
          {
            title: '测点纬度',
            dataIndex: 'placeLat',
            sorter: true
          },
           {
            title: '机动车车道数',
            dataIndex: 'motorway',
            sorter: true
          },
          {
            title: '车道类别',
            dataIndex: 'motorwayType',
            sorter: true
          },
           {
            title: '道路等级',
            dataIndex: 'motorwayLevel',
            sorter: true
          },
          {
            title: '测点参照物',
            dataIndex: 'refObj',
            sorter: true
          },
           {
            title: '道路覆盖人口（万人）',
            dataIndex: 'people',
            sorter: true
          },
           {
            title: '监测站名',
            dataIndex: 'station',
            sorter: true
          },
           {
            title: '监测仪器型号',
            dataIndex: 'monitorInstrumentModel',
            sorter: true
          },
           {
            title: '监测仪器编号',
            dataIndex: 'monitorInstrumentCode',
            sorter: true
          },
           {
            title: '监测前校准值',
            dataIndex: 'beforeMonitorValue',
            sorter: true
          },
           {
            title: '声校准器测量声压值',
            dataIndex: 'soundPressureValue',
            sorter: true
          },
           {
            title: '声校准仪器型号',
            dataIndex: 'soundInstrumentModel',
            sorter: true
          },
           {
            title: '声校准仪器编号',
            dataIndex: 'soundInstrumentCode',
            sorter: true
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            fixed: 'right',
            slots: {
              customRender: 'action'
            }
          }
        ],
        // 表格搜索条件
        functionPlaceBillId: billId,
        where: {
          functionPlaceBillId: billId
        },
        // 表格选中数据
        selectionList: [],
        // 是否显示编辑弹窗
        showEdit: false,
        // 表单数据
        form: {},
        loading: false,
        rules: {}

      };
    },
    mounted(){
    
      getFunctionPlaceBill(this.functionPlaceBillId).then(res=>{
        this.bill = res.data.data
        if(res.data.data.checked == 1){
          this.columns.splice(this.columns.length-1,1)
        }
      })
    },
    methods: {
      /* 刷新表格 */
      reload() {
        console.log(this.$route);
        console.log(this.$router);
        this.$refs.table.reload({
          where: this.where
        });
      },
      /* 重置搜索 */
      reset() {
        this.where = {
          functionPlaceBillId: this.functionPlaceBillId
        };
        this.reload();
      },
      /* 显示编辑 */
      openEdit(record) {
        const cloneRecord = _.cloneDeep(record)
        // 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);
        delete form['monitorDate']
        if (form.functionPlaceId) {
          updateFunctionPlace(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.functionPlaceBillId = this.functionPlaceBillId;
             saveFunctionPlace(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);
        console.log(row);
        removeFunctionPlace(row.functionPlaceId).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.functionPlaceId);
        const hide = this.$message.loading('请求中..', 0);
        removeBatchFunctionPlace(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>