<template>
  <div class="manage-container">
    <div class="manage-input">
      <el-form ref="queryForm" :model="queryForm" label-width="100px">
        <vab-query-form>
          <el-form-item
            width="100"
            prop="deviceName"
            :label="$t('dataEnquiry.zdmc')"
          >
            <el-input
              v-model="queryForm.deviceName"
              size="small"
              :placeholder="$t('dataEnquiry.qsrzdmc')"
            ></el-input>
          </el-form-item>
          <el-form-item width="100" prop="signUser" :label="$t('apply.sqr')">
            <el-input
              v-model="queryForm.signUser"
              size="small"
              :placeholder="$t('apply.qsrsqr')"
            ></el-input>
          </el-form-item>
          <el-form-item width="100" prop="date" :label="$t('defalult.sj')">
            <el-date-picker
              v-model="queryForm.date"
              size="small"
              type="month"
              :placeholder="$t('defalult.xzrq')"
              @change="standardToTime"
            ></el-date-picker>
          </el-form-item>
        </vab-query-form>
      </el-form>
    </div>
    <div class="manage-button">
      <el-button size="small" @click="resetForm()">
        {{ $t('defalult.chongz') }}
      </el-button>
      <el-button type="primary" size="small" @click="search">
        {{ $t('defalult.cx') }}
      </el-button>
      <el-button type="primary" size="small" @click="handleAdd">
        {{ $t('defalult.tj') }}
      </el-button>
      <el-button type="primary" size="small" @click="exportData">
        {{ $t('defalult.dc') }}
      </el-button>
      <el-button type="primary" size="small" @click="deletes">
        {{ $t('defalult.plsc') }}
      </el-button>
    </div>
  </div>
  <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      fixed
      type="selection"
      width="40"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="device.name"
      :label="$t('dataEnquiry.zdmc')"
      width="250"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="sampleQuantity"
      :label="$t('apply.ypsl')"
      width="200"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="applicantName"
      :label="$t('apply.sqr')"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="sampleBack.dataValue"
      :label="$t('apply.ypqh')"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="sampleType.dataValue"
      :label="$t('apply.yplx')"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      property="detectionItems"
      :label="$t('apply.jcxm')"
      width="500"
      align="center"
    >
      <template #default="{ row }">
        <span v-for="(item, index) in row.detectionItems" :key="index">
          <p v-if="item != null">{{ item.dataValue }}</p>
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="detectionReport.dataValue"
      :label="$t('apply.jcbg')"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="reportUse.dataValue"
      :label="$t('apply.bgcj')"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="asOfTime"
      :label="$t('apply.jzsj')"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="createTime"
      :label="$t('apply.cjsj')"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="remark"
      :label="$t('alarm.bz')"
      width="150"
      align="center"
    ></el-table-column>
    <el-table-column prop="details" :label="$t('apply.sqsj')" align="center">
      <template #default="{ row }">
        <el-button size="mini" type="primary" plain @click="handleEdit(row)">
          {{ $t('defalult.bj') }}
        </el-button>
        <el-button type="text" @click="handleDelete(row)">
          {{ $t('defalult.sc') }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :background="background"
    :current-page="queryForm.page"
    :layout="layout"
    :page-size="queryForm.size"
    :total="total"
    style="text-align: right"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
  <apply-detail ref="detail"></apply-detail>
  <apply-edit ref="edit"></apply-edit>
</template>

<script>
import { getWaterApply, doDelete, exportWaterApply } from '@/api/apply';
import { getDate1 } from '@/common/times';
import applyDetail from './applyDetail';
import applyEdit from './applyEdit';
import ajax from '@/api/download';
export default {
  components: {
    applyDetail,
    applyEdit,
  },
  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      lazy: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      background: true,
      listLoading: false,
      elementLoadingText: '正在加载...',
      ids: [],
      queryForm: {
        page: 1,
        size: 20,
        deviceName: '',
        signUser: '',
        date: '',
        projectId: '',
      },
      form: {
        id: '',
        location: '',
      },
    };
  },
  created() {
    this.applyIndex();
  },
  methods: {
    applyIndex() {
      this.queryForm.projectId = sessionStorage.getItem('projectId');
      this.setDefaultTime();
      setTimeout(() => {
        this.fetchData();
      }, 1000);
    },
    //标准时间转yyyy-mm-dd
    standardToTime() {
      this.queryForm.date = getDate1(this.queryForm.date);
    },
    setDefaultTime() {
      this.queryForm.date = getDate1();
    },
    async fetchData() {
      const { data } = await getWaterApply(this.queryForm);
      this.tableData = data.items;
      this.total = data.total;
    },
    //搜索
    search() {
      this.fetchData();
    },
    resetForm() {
      this.$refs.queryForm.resetFields();
    },
    //导出
    async exportData() {
      const url = await exportWaterApply(this.queryForm);
      ajax.downloadFile(url, { fileName: '水质申请.xls' });
    },
    handleSelectionChange(val) {
      const ids = [];
      val.forEach(row => {
        ids.push(row.id);
      });
      this.ids = ids;
    },
    handleAdd() {
      this.$refs['edit'].showEdit();
    },
    handleEdit(row) {
      this.$refs['edit'].showEdit(row);
    },
    showDetail(row) {
      this.$refs['detail'].showDetail(row);
    },
    deletes() {
      const ids = this.ids;
      if (ids.length == 0) {
        this.$message({
          type: 'info',
          message: '没有选中任何项',
        });
        return false;
      }
      this.deleteData(ids);
    },
    //删除
    deleteData(dis) {
      const that = this;
      this.$confirm('你确定要删除当前项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const { msg } = doDelete(dis);
          this.$message({
            type: 'success',
            message: msg == undefined ? '删除成功' : msg,
          });
          setTimeout(function () {
            that.fetchData();
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    handleDelete(row) {
      const that = this;
      that.deleteData([row.id]);
    },
    handleQuery() {
      this.queryForm.page = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 200px !important;
}
.el-select {
  width: 200px !important;
}
.manage-button {
  padding-left: 12px;
  margin-bottom: 30px;
}
</style>
