<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="where" :labelCol="{ offset: 1}">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <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-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="表格名称:">
              <a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="上报时间:">
              <a-range-picker separator="~" v-model:value="reportTimeScope" />
            </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>
      <!-- 表格 -->
      <ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseBillId" :datasource="url"
        :columns="columns" :where="where" :scroll="{x: 'max-content'}">
        <template #toolbar>
          <a-space>
            <a-upload :before-upload="importFile" :showUploadList="false" accept=".xls,.xlsx,.csv">
              <a-button>导入excel</a-button>
            </a-upload>
            <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 #billName="{ text, record }">
          <div class="editable-cell">
            <div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
              <a-input v-model:value="editableData[record.roadNoiseBillId].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.roadNoiseBillId]" class="editable-cell-input-wrapper">
              <a-date-picker v-model:value="editableData[record.roadNoiseBillId].reportTime"></a-date-picker>
              <!-- <a-input v-model:value="editableData[record.roadNoiseBillId].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']"  v-if="record.checked != 1">
              <a-popconfirm :title="`审核通过后将无法修改，确认？`" ok-text="Yes" cancel-text="No"
                @confirm="verify(record)">
                <a-button type="primary" shape="round" size="small">审核</a-button>
              </a-popconfirm>
            </span>
            <span v-hasPermi="['ecology:sound:remove']"  v-if="record.checked != 1">
              <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>
            </span>
            
          </a-space>
        </template>
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
  import XLSX from 'xlsx';
  import _ from "lodash"
  import {
    CheckOutlined,
    EditOutlined
  } from '@ant-design/icons-vue';
  import {
    pageBillUrl,
    saveRoadNoiseBill,
    removeRoadNoiseBill,
    removeBatchRoadNoiseBill,
    updateRoadNoiseBill,
    verifyRoadNoiseBill
  } from "@/api/ecology/road-sound";
  import utils from "./utils";
  import moment from "moment";
  export default {
    name: 'RoadNoise',
    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: '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: '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: "/sound/road/collect/table/" + record.roadNoiseBillId
        })
      },
      edit(record) {
        this.editableData[record.roadNoiseBillId] = _.cloneDeep(record);
        this.editableData[record.roadNoiseBillId].reportTime = moment(this.editableData[record.roadNoiseBillId]
          .reportTime)
      },
      verify(record) {
        const hide = this.$message.loading('请求中..', 0);
        verifyRoadNoiseBill({
          roadNoiseBillId: record.roadNoiseBillId
        }).then(res => {
          if (res.data.code == 0) {
            record.checked = 1
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch((e) => {
          this.$message.error(e.message);
        }).finally(() => {
          hide();
        })
      },
      save(record) {

        let {
          roadNoiseBillId,
          billName,
          reportTime
        } = this.editableData[record.roadNoiseBillId];
        if (!roadNoiseBillId || !reportTime) {
          this.$message.error('请填写完整信息再提交')
          return
        }
        const hide = this.$message.loading('请求中..', 0);
        reportTime = reportTime.format("x")
        reportTime = Number(reportTime)
        updateRoadNoiseBill({
          roadNoiseBillId,
          billName,
          reportTime
        }).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.roadNoiseBillId]
          hide()
        })

      },
      /* 删除单个 */
      remove(row) {
        const hide = this.$message.loading('请求中..', 0);
        removeRoadNoiseBill(row.roadNoiseBillId).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.roadNoiseBillId);
        const hide = this.$message.loading('请求中..', 0);
        removeBatchRoadNoiseBill(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());
      },
      /* 导入本地excel文件 */
      importFile(file) {
        try {
          let reader = new FileReader();
          reader.onload = (e) => {
            let data = new Uint8Array(e.target.result);
            let workbook = XLSX.read(data, {
              type: 'array'
            });
            let sheetNames = workbook.SheetNames;
            // 解析成二维数组
            let aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
              header: 1,
            });
            let aoa2 = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[1]], {
              header: 1,
            });
            const reportDate = aoa[1][0].replace(/[^\d]+/g, "-")
            const reportDate2 = aoa2[1][0].replace(/[^\d]+/g, "-")
            const roadNoiseList = aoa.filter(item => item.length == 21 && typeof item[0] == "number");
            const roadNoiseList2 = aoa2.filter(item => item.length == 21 && typeof item[0] == "number");
            // 解析成对象数组
            const billData = utils.toObjData(roadNoiseList);
            const billData2 = utils.toObjData(roadNoiseList2);
            // 上传到服务器
            saveRoadNoiseBill({
              reportTime: new Date(reportDate).getTime(),
              billName: sheetNames[0] + reportDate,
              roadNoiseList: billData
            }).then(saveRoadNoiseBill({
              reportTime: new Date(reportDate2).getTime(),
              billName: sheetNames[1] + reportDate2,
              roadNoiseList: billData2
            })).then(() => {
              this.reload()
            })
            // console.log(billData);

          };
          reader.readAsArrayBuffer(file);
        } catch (error) {
          this.$message.error("表格格式有误，请检查后重新上传！");
        }
        return false;
      }
    }
  }
</script>

<style scoped 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>