<!--江河水点位信息-->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <a-form :model="where" :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-select v-model:value="where.year" allow-clear show-search>
                <a-select-option v-for="(item) in yearOptions" :key="item.value">{{ item.label }}
                </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-select v-model:value="where.sectionGenre" allow-clear show-search>
                <a-select-option :value="'1'">国控断面</a-select-option>
                <a-select-option :value="'2'">省控断面</a-select-option>
                <a-select-option :value="'3'">市控断面</a-select-option>
                <a-select-option :value="'4'">水环境功能区监控断面</a-select-option>
                <a-select-option :value="'5'">重点流域断面</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-space>
              <a-button type="primary" @click="reload">查询</a-button>
              <a-button @click="reset">重置</a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-row>

        </a-row>
      </a-form>
      <a-modal v-model:visible="showNYear" :title="'批量复制'" :confirm-loading="loading"
        :body-style="{ paddingBottom: '8px' }" @ok="copyBatch">
        <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-form-item label="新年份" name="nYear">
            <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
          </a-form-item>
        </a-form>
      </a-modal>
      <a-modal v-model:visible="showEdit" :title="form.surfaceWaterPointId !== undefined ? '修改' : '添加'"
        :confirm-loading="loading" :width="800" :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-form-item label="年份" name="year">
            <a-input-number v-model:value="form.year" :min="1970" :max="2050" />
          </a-form-item>
          <a-form-item label="断面编码" name="sectionCode">
            <a-input v-model:value="form.sectionCode" placeholder="请输入断面编码" allow-clear />
          </a-form-item>
          <a-form-item label="断面名称" name="sectionName">
            <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
          </a-form-item>
          <a-form-item label="所属省份" name="province">
            <a-input v-model:value="form.province" placeholder="请输入所属省份" allow-clear />
          </a-form-item>
          <a-form-item label="所属城市" name="city">
            <a-input v-model:value="form.city" placeholder="请输入所属城市" allow-clear />
          </a-form-item>
          <a-form-item label="考核省份" name="assessmentProvince">
            <a-input v-model:value="form.assessmentProvince" placeholder="请输入考核省份" allow-clear />
          </a-form-item>
          <a-form-item label="断面类型" name="sectionType">
            <a-input v-model:value="form.sectionType" placeholder="请输入断面类型" allow-clear />
          </a-form-item>
          <a-form-item label="断面属性" name="sectionAttribute">
            <a-input v-model:value="form.sectionAttribute" placeholder="请输入断面属性" allow-clear />
          </a-form-item>
          <a-form-item label="断面类别" name="sectionGenre">
            <a-select v-model:value="form.sectionGenre" allowClear placeholder="未选择">
              <a-select-option :value="'1'">国控断面</a-select-option>
              <a-select-option :value="'2'">省控断面</a-select-option>
              <a-select-option :value="'3'">市控断面</a-select-option>
              <a-select-option :value="'4'">水环境功能区监控断面</a-select-option>
              <a-select-option :value="'5'">重点流域断面</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="水质目标" name="waterTarget">
            <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
          </a-form-item>
          <a-form-item label="流域" name="basin">
            <a-input v-model:value="form.basin" placeholder="请输入流域" allow-clear />
          </a-form-item>
          <a-form-item label="水系" name="riverSystem">
            <a-input v-model:value="form.riverSystem" placeholder="请输入水系" allow-clear />
          </a-form-item>
          <a-form-item label="所在水体" name="waterBody">
            <a-input v-model:value="form.waterBody" placeholder="请输入所在水体" allow-clear />
          </a-form-item>
          <a-form-item label="汇入水体" name="importWaterBody">
            <a-input v-model:value="form.importWaterBody" placeholder="请输入汇入水体" allow-clear />
          </a-form-item>
          <a-form-item label="河流级别" name="riverLevel">
            <a-input v-model:value="form.riverLevel" placeholder="请输入河流级别" allow-clear />
          </a-form-item>
          <a-form-item label="经度" name="longitude">
            <a-input v-model:value="form.longitude" placeholder="请输入经度" allow-clear />
          </a-form-item>
          <a-form-item label="纬度" name="latitude">
              <a-input v-model:value="form.latitude" placeholder="请输入纬度" allow-clear />
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- 表格 -->
      <ele-pro-table v-model:selection="selectionList" ref="table" row-key="surfaceWaterPointId" :datasource="url"
        :columns="columns" :where="where" :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
        <template #toolbar>
          <a-space>
            <a-button @click="openEdit" type="primary">新增</a-button>
            <a-dropdown>
              <template #overlay>
                <a-menu @click="setCYear">
                  <a-menu-item v-for="item in yearOptions" :key="item.value">
                    {{ item.label }}
                  </a-menu-item>
                </a-menu>
              </template>
              <a-button>
                批量复制
                <DownOutlined />
              </a-button>
            </a-dropdown>
            <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-button @click="exportData" type="primary">导出</a-button>
          </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 {
    listAllUrl,
    savePlace,
    updatePlace,
    removePlace,
    removeBatchPlace,
    copyBatchPlace,
    getColumnOptions
  } from "@/api/ecology/water/river-plcae";
  import XLSX from "xlsx";
  import {
    DownOutlined
  } from '@ant-design/icons-vue';
  // import moment from "moment";
  export default {
    name: "WaterPlace",
    components: {
      DownOutlined
    },
    data() {
      return {
        data: [],
        // 表格数据接口
        url: listAllUrl,
        selection: [],
        // 表格列配置
        columns: [{
            title: "年份",
            dataIndex: "year",
            sorter: true,
          },
          {
            title: "断面编码",
            dataIndex: "sectionCode",
            sorter: true,
          },
          {
            title: "断面名称",
            dataIndex: "sectionName",
            sorter: true,
          },
          {
            title: "所属省份",
            dataIndex: "province",
            sorter: true,
          },
          {
            title: "所属城市",
            dataIndex: "city",
            sorter: true,
          },
          {
            title: "考核省份",
            dataIndex: "assessmentProvince",
            sorter: true,
          },
          {
            title: "断面类型",
            dataIndex: "sectionType",
            sorter: true,
          },
          {
            title: "断面属性",
            dataIndex: "sectionAttribute",
            sorter: true,
          },
          {
            title: "断面类别",
            dataIndex: "sectionGenre",
            sorter: true,
            customRender:({text})=>  text == "1"?"国控断面":text == "2"?"省控断面":text == "3"?"市控断面":text == "4"?"水环境功能区监控断面":text == "5"?"重点流域断面":""
   
          },
          {
            title: "水质目标",
            dataIndex: "waterTarget",
          },
          {
            title: "流域",
            dataIndex: "basin",
            sorter: true,
          },

          {
            title: "水系",
            dataIndex: "riverSystem",
            sorter: true,
          },
          {
            title: "所在水体",
            dataIndex: "waterBody",
            sorter: true,
          },
          {
            title: "汇入水体",
            dataIndex: "importWaterBody",
            sorter: true,
          },
          {
            title: "河流级别",
            dataIndex: "riverLevel",
            sorter: true,
          },
          {
              title: "经度",
              dataIndex: "longitude",
          },
          {
              title: "纬度",
              dataIndex: "latitude",
          },
          {
            title: "操作",
            key: "action",
            width: 150,
            align: "center",
            fixed: "right",
            slots: {
              customRender: "action",
            },
          },
        ],

        // 表格搜索条件
        where: {},
        // 表格选中数据
        selectionList: [],
        // 是否显示编辑弹窗
        showEdit: false,
        // 表单数据
        form: {},
        loading: false,
        rules: {
          year: [{
            required: true,
            message: '请输入年份'
          }],
          sectionCode: [{
            required: true,
            message: '请输入断面编码'
          }],
          sectionName: [{
            required: true,
            message: '请输入断面名称'
          }],
        },
        yearOptions: [],
        showNYear: false,
        cYear: undefined,
        nYear: undefined,
      };
    },
    mounted() {
      this.getOptions();
    },
    methods: {
      /* 刷新表格 */
      reload() {

        this.$refs.table.reload({
          where: this.where,
        });
      },
      /* 重置搜索 */
      reset() {
        this.where = {};
        this.reload();
      },
      /* 打开编辑弹窗 */
      openEdit(row) {
        // cloneRecord.mi
        this.form = Object.assign({}, row);
        this.showEdit = true;
        this.$nextTick(() => {
          this.$refs.form.clearValidate(); // 清除表单验证信息
        });
      },
      async save() {
        await this.$refs.form.validate();
        const hide = this.$message.loading('请求中..', 0);
        const form = this.form;
        console.log(form, 'form');
        if (form.surfaceWaterPointId) {
          updatePlace(form)
            .then((res) => {
              if (res.data.code == 0) {
                this.showEdit = false;
                this.$message.success(res.data.msg);
                this.reload();
                this.getOptions();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((error) => {
              this.$message.error(error.message);
            })
            .finally(() => {
              hide();
            });
        } else {
          savePlace(form)
            .then((res) => {
              if (res.data.code == 0) {
                this.showEdit = false;
                this.$message.success(res.data.msg);
                this.reload();
                this.getOptions();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((error) => {
              this.$message.error(error.message);
            })
            .finally(() => {
              hide();
            });
        }
      },
      /* 删除单个 */
      remove(row) {
        const hide = this.$message.loading('请求中..', 0);
        removePlace(row.surfaceWaterPointId).then((res) => {
          hide();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          hide();
          this.$message.error(e.message);
        })
      },
      /* 批量删除 */
      removeBatch() {
        const hide = this.$message.loading('请求中..', 0);
        const ids = this.selectionList.map((item) => item.surfaceWaterPointId);
        removeBatchPlace(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.message);
        }).finally(() => {
          hide();
        })
      },
      getOptions() {
        getColumnOptions("year").then(res => {
          console.log(res)
          if (res.data.code == 0) {
            this.yearOptions = res.data.data.map(item => {
              return {
                label: item,
                value: item
              }
            })
          }
        })
      },
      setCYear(e) {
        this.cYear = e.key;
        this.showNYear = true;
      },
      copyBatch() {
        const hide = this.$message.loading('请求中..', 0);
        copyBatchPlace({
          cyear: Number(this.cYear),
          nyear: this.nYear
        }).then(res => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
            this.getOptions();
          } else {
            this.$message.error(res.data.msg);
          }
          this.showNYear = false;
        }).catch(e => {
          this.$message.error(e.message);
        }).finally(() => {
          hide();
        })
      },
      exportData() {
        const columns = this.columns.filter(item => item.dataIndex);
        const arr = [];
        const th = columns.map((item) => item.title);
        arr.push(th);
        this.data.forEach((d) => {
          const td = columns.map((item) => d[item.dataIndex]);
          arr.push(td);
        });

        let sheet = XLSX.utils.aoa_to_sheet(arr);
        this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
      }

    },
  };

</script>

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