<!-- 江河水导入Excel列表页面-->
<template>
  <div>
            <!-- 表格 -->
      <ele-pro-table v-model:selection="selectionList" ref="table" row-key="surfaceWaterSectionBillId" :datasource="url"
        :columns="columns" :where="where" :scroll="{x: 'max-content'}">
        <template #toolbar>

          <!-- 搜索表单 -->
          <a-form layout="inline" :model="where" :labelCol="{ offset: 1}">
            <a-form-item label="区域等级:">
              <a-select v-model:value="where.regionLevel" allowClear placeholder="未选择">
                <a-select-option :value="'市级'">市级</a-select-option>
                <a-select-option :value="'县级'">县级</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="审核状态:">
              <a-select v-model:value="where.checked" allowClear placeholder="未选择">
                <a-select-option :value="1">已审核</a-select-option>
                <a-select-option :value="0">未审核</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="表格名称:">
              <a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
            </a-form-item>

            <a-form-item label="上报时间:">
              <a-range-picker separator="~" v-model:value="reportTimeScope" />
            </a-form-item>

            <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-form>
        </template>
        <template #toolkit>
          <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>
        </template>
        <template #billName="{ text, record }">
          <div class="editable-cell">
            <div v-if="editableData[record.surfaceWaterSectionBillId]" class="editable-cell-input-wrapper">
              <a-input v-model:value="editableData[record.surfaceWaterSectionBillId].billName" @pressEnter="save(record)" />
              <check-outlined class="editable-cell-icon-check" @click="save(record)" />
            </div>
            <div v-else class="editable-cell-text-wrapper">
              {{ text || ' ' }}
              <edit-outlined class="editable-cell-icon" @click="edit(record)" />
            </div>
          </div>
        </template>
        <template #reportTime="{ text, record }">
          <div class="editable-cell">
            <div v-if="editableData[record.surfaceWaterSectionBillId]" class="editable-cell-input-wrapper">
              <a-date-picker v-model:value="editableData[record.surfaceWaterSectionBillId].reportTime"></a-date-picker>
              <!-- <a-input v-model:value="editableData[record.surfaceWaterSectionBillId].reportTime" @pressEnter="save(record)" /> -->
              <check-outlined class="editable-cell-icon-check" @click="save(record)" />
            </div>
            <div v-else class="editable-cell-text-wrapper">
              {{ $util.toDateString(text,'yyyy-MM-dd') || ' ' }}
              <edit-outlined class="editable-cell-icon" @click="edit(record)" />
            </div>
          </div>
        </template>
        <template #checked="{text}">
          <span>
            <a-tag v-if="text" color="green">已审核</a-tag>
            <a-tag v-else color="orange">未审核</a-tag>
          </span>
        </template>

        <template #action="{ record }">
          <a-space>
            <a-button @click="detail(record)" shape="round" size="small">查看</a-button>
            <span v-hasPermi="['ecology:sound:verify']">
              <a-popconfirm  v-if="record.checked != 1" :title="`审核通过后将无法修改，确认？`" ok-text="Yes" cancel-text="No"
                @confirm="verify(record,1)">
                <a-button type="primary" shape="round" size="small">审核</a-button>
              </a-popconfirm>
              <a-popconfirm v-else :title="`撤回重新编辑，确认？`" ok-text="Yes" cancel-text="No"
                @confirm="verify(record,0)">
                <a-button type="dashed" shape="round" size="small">撤回</a-button>
              </a-popconfirm>
            </span>
            <a-popconfirm :title="`确认删除${record.billName}吗?`" 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>
  </div>
</template>

<script>

  import _ from "lodash"
  import {
    CheckOutlined,
    EditOutlined
  } from '@ant-design/icons-vue';
  import { Modal } from 'ant-design-vue';
  import {
    pageBillUrl,
    // saveRiverBill,
    removeRiverBill,
    removeBatchRiverBill,
    updateRiverBill,
    verifyRiverBill
  } from "@/api/ecology/river";
  import moment from "moment";
  export default {
    name: 'RiverCollectNoiseBill',
    components: {
      CheckOutlined,
      EditOutlined
    },
    data() {

      return {
        // 表格数据接口
        url: pageBillUrl,
        selection: [],
        // 表格列配置
        columns: [{
            key: 'index',
            dataIndex: 'index',
            width: 48,
            align: 'center',
            customRender: ({
              index
            }) => index + 1
          },
          {
            title: '表格名称',
            dataIndex: 'billName',
            sorter: true,
            slots: {
              customRender: 'billName',
            },

          },
          {
            title: '区域等级',
            dataIndex: 'regionLevel',
            sorter: true,
          },
          {
            title: '条目',
            dataIndex: 'recordSize',
            sorter: true,

          },
          // {
          //   title: '菜单名称',
          //   dataIndex: 'title',
          //   sorter: true
          // },
          // {
          //   title: '上报时间',
          //   dataIndex: 'reportTime',
          //   sorter: true,
          //   slots: {
          //     customRender: 'reportTime',
          //   },
          //   // customRender: ({
          //   //   text
          //   // }) => this.$util.toDateString(text)
          // },
          {
            title: '导入时间',
            dataIndex: 'createTime',
            sorter: true,
            customRender: ({
              text
            }) => this.$util.toDateString(text)
          },
          {
            title: '审核状态',
            dataIndex: 'checked',
            sorter: true,
            slots: {
              customRender: 'checked',
            },

          },
          {
            title: '创建人',
            dataIndex: 'userName',
            sorter: true,

          },
          // {
          //   title: '更新时间',
          //   dataIndex: 'updateTime',
          //   sorter: true,
          //   customRender: ({
          //     text
          //   }) => this.$util.toDateString(text)
          // },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            slots: {
              customRender: 'action'
            }
          }
        ],
        // 表格搜索条件
        where: {},
        reportTimeScope: [],
        // 表格选中数据
        selectionList: [],
        editableData: {},
        // 当前编辑数据
        current: null,
      };
    },
    methods: {


      /* 刷新表格 */
      reload() {
        this.where.reportTimeStart = null;
        this.where.reportTimeEnd = null;
        if (this.reportTimeScope && this.reportTimeScope.length == 2) {
          this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
          this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
        }
        this.$refs.table.reload({
          where: this.where
        });
      },
      /* 重置搜索 */
      reset() {
        this.where = {};
        this.reportTimeScope = [];
        this.reload();
      },
      detail(record) {
        this.$router.replace({
          path: "/water/river/collect/water/" + record.surfaceWaterSectionBillId
        })
      },
      edit(record) {
        this.editableData[record.surfaceWaterSectionBillId] = _.cloneDeep(record);
        this.editableData[record.surfaceWaterSectionBillId].reportTime = moment(this.editableData[record.surfaceWaterSectionBillId]
          .reportTime)
      },
      verify(record,checked) {
        const hide = this.$message.loading('请求中..', 0);
        verifyRiverBill({
          surfaceWaterSectionBillId: record.surfaceWaterSectionBillId,
          checked
        }).then(res => {
          if (res.data.code == 0) {
            record.checked = checked
            Modal.success({
              title: "提示",
              content: checked?"审核成功":"撤回成功"
            });
          } else {
            Modal.error({
              title: "提示",
              content: res.data.msg
            });
          }
        }).catch((e) => {
          this.$message.error(e.message);
        }).finally(() => {
          hide();
        })
      },
      save(record) {

        let {
          surfaceWaterSectionBillId,
          billName,
        } = this.editableData[record.surfaceWaterSectionBillId];
          
        let regionLevel = record.regionLevel;
        let reportTime = record.createTime;
        let createTime = record.createTime;
        let userId = record.userId;
        let checked = record.checked;
        
        if (!surfaceWaterSectionBillId || !reportTime) {
          this.$message.error('请填写完整信息再提交')
          return
        }
        const hide = this.$message.loading('请求中..', 0);
       
        updateRiverBill({
          surfaceWaterSectionBillId,
          billName,
          reportTime,
          regionLevel,
          userId,
          createTime,
          checked
        }).then(res => {
          if (res.data.code == 0) {
            this.$message.success(res.data.msg);
            record.billName = billName;
            record.reportTime = reportTime
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          console.log(e);
          this.$message.error(e.message);
        }).finally(() => {
          delete this.editableData[record.surfaceWaterSectionBillId]
          hide()
        })

      },
      /* 删除单个 */
      remove(row) {
        const hide = this.$message.loading('请求中..', 0);
        removeRiverBill(row.surfaceWaterSectionBillId).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.surfaceWaterSectionBillId);
        const hide = this.$message.loading('请求中..', 0);
        removeBatchRiverBill(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 lang="less">
  .editable-cell {
    position: relative;

    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
      padding-right: 24px;
    }

    .editable-cell-text-wrapper {
      padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
      position: absolute;
      right: 0;
      width: 20px;
      cursor: pointer;
    }

    .editable-cell-icon {
      margin-top: 4px;
      display: none;
    }

    .editable-cell-icon-check {
      line-height: 28px;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
      color: #108ee9;
    }

    .editable-add-btn {
      margin-bottom: 8px;
    }
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }
</style>
