<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-space>
              <a-button type="primary" @click="reload">查询</a-button>
              <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
              </a-button>
              <a-button @click="exportData" type="primary">按年份导出</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.drinkingWaterDictId !== 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="province">
            <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear/>
          </a-form-item>
          <a-form-item label="省份代码" name="provinceCode">
            <a-input v-model:value="form.provinceCode" 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="cityCode">
            <a-input v-model:value="form.cityCode" placeholder="请输入城市代码" allow-clear/>
          </a-form-item>
          <a-form-item label="重点城市区分" name="keyCity">
            <a-input v-model:value="form.keyCity" placeholder="请输入重点城市区分" allow-clear/>
          </a-form-item>
          <a-form-item label="城市方位" name="cityOrientation">
            <a-input v-model:value="form.cityOrientation" 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="sectionCode">
            <a-input v-model:value="form.sectionCode" placeholder="请输入断面代码" allow-clear/>
          </a-form-item>
          <a-form-item label="水源名称" name="sourceWaterName">
            <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear/>
          </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="subordinateWater">
            <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear/>
          </a-form-item>
          <a-form-item label="水源地性质" name="waterSourceProperty">
            <a-input v-model:value="form.waterSourceProperty" 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-item label="修正位置" name="correctLocation">
            <a-input-search @search="showRoadMap(form)"
                            :value="`[${form.correctLng},${form.correctLat}]`"
                            placeholder="`[${form.longitude},${form.latitude}]`" allow-clear>
              <template #enterButton>
                <a-button>选择位置</a-button>
              </template>
            </a-input-search>
          </a-form-item>

          <a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
                   v-model:visible="visibleRoadMap" :title="roadMapTitle"
          >
            <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
            <template #footer>
              <a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
            </template>
          </a-modal>
          <a-form-item label="排序" name="sortNum">
            <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear/>
          </a-form-item>
          <a-form-item label="饮用水类型，1在用、2备用" name="drinkingWaterType">
            <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear/>
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- 表格 -->
      <ele-pro-table
        v-model:selection="selectionList"
        ref="table"
        row-key="drinkingWaterDictId"
        :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-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 {
  pageDictUrl,
  saveDrinkingWaterDict,
  removeDrinkingWaterDict,
  removeBatchDrinkingWaterDict,
  updateDrinkingWaterDict,
  // verifyDrinkingWaterDict,
  // getDrinkingWaterDict
  getColumnOptions,
  copyBatchPlace
} from "@/api/ecology/drinking-water-dict";
// import moment from "moment";
import {DownOutlined} from '@ant-design/icons-vue';
import XLSX from "xlsx";

export default {
  name: "DrinkWaterDict",
  components: {DownOutlined},
  data() {
    return {
      data: [],
      // 表格数据接口
      url: pageDictUrl,
      selection: [],
      // 表格列配置
      columns: [
        {title: "年份", dataIndex: "year", sorter: true,},
        {title: "省", dataIndex: "province", sorter: true,},
        {title: "省份代码", dataIndex: "provinceCode", sorter: true,},
        {title: "市", dataIndex: "city", sorter: true},
        {title: "城市代码", dataIndex: "cityCode", sorter: true},
        {title: "重点城市区分", dataIndex: "keyCity", sorter: true},
        {title: "城市方位", dataIndex: "cityOrientation", sorter: true,},
        {title: "断面名称", dataIndex: "sectionName", sorter: true},
        {title: "断面代码", dataIndex: "sectionCode", sorter: true,},
        {title: "水源名称", dataIndex: "sourceWaterName", sorter: true,},
        {title: "所属水系", dataIndex: "subordinateWater", sorter: true,},
        {title: "水源地性质", dataIndex: "waterSourceProperty", sorter: true},
        {title: "经度(°)", dataIndex: "longitude", sorter: true,},
        {title: "纬度(°)", dataIndex: "latitude", sorter: true,},
        {title: "修正经度", dataIndex: "correctLng"},
        {title: "修正纬度", dataIndex: "correctLat"},
        {
          title: "饮用水类型",
          dataIndex: "drinkingWaterType",
          sorter: true,
          customRender: ({text}) => text == 1 ? "在用" : "备用"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          fixed: "right",
          slots: {
            customRender: "action",
          },
        },
      ],

      // 表格搜索条件
      where: {
        sort: "sectionCode",
      },
      // 表格选中数据
      selectionList: [],
      // 是否显示编辑弹窗
      showEdit: false,
      // 表单数据
      form: {},
      loading: false,
      rules: {
        // year: [{required: true, message: '请输入年份'}],
        // sourceWaterName:[{required: true,message: '请选择水源名称'}],
        // longitude: [{required: true,message: '请输入经度',},],
        // latitude: [{required: true,message: '请输入纬度',},],
      },
      yearOptions: [],
      showNYear: false,
      cYear: undefined,
      nYear: undefined,
      visibleRoadMap: false,
      roadMapTitle: "选择坐标",
    };
  },
  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;
      if (form.drinkingWaterDictId) {
        updateDrinkingWaterDict(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();
          });
      } else {
        saveDrinkingWaterDict(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);
      removeDrinkingWaterDict(row.drinkingWaterDictId).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.drinkingWaterDictId);
      removeBatchDrinkingWaterDict(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);
      });
      console.log(arr);
      let sheet = XLSX.utils.aoa_to_sheet(arr);
      console.log(arr);
      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
    },
    showRoadMap(form) {
      const {longitude,latitude,correctLng,correctLat} = form
      this.visibleRoadMap = true
      this.roadMapTitle = "选择修正后的道路坐标"
      this.$nextTick(() => {
        console.log(this.$refs.roadMap)
        // eslint-disable-next-line no-undef
        var map = new BMap.Map(this.$refs.roadMap);    // 创建Map实例
        // eslint-disable-next-line no-undef
        map.addControl(new BMap.NavigationControl());  //初始化地图控件
        // eslint-disable-next-line no-undef
        map.addControl(new BMap.ScaleControl());
        // eslint-disable-next-line no-undef
        map.addControl(new BMap.OverviewMapControl());
        // eslint-disable-next-line no-undef
        var point = new BMap.Point(correctLng?correctLng:longitude?longitude:108.33,correctLat?correctLat:latitude?latitude:22.84);
        // var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
        map.centerAndZoom(point, 13);//初始化地图中心点
        // eslint-disable-next-line no-undef
        var marker = new BMap.Marker(point); //初始化地图标记
        marker.enableDragging(); //标记开启拖拽
        // eslint-disable-next-line no-undef
        var gc = new BMap.Geocoder();//地址解析类
        //添加标记拖拽监听
        marker.addEventListener("dragend", (e) => {
          //获取地址信息
          this.form['correctLng'] = e.point.lng
          this.form['correctLat'] = e.point.lat

          gc.getLocation(e.point, function (rs) {
            showLocationInfo(e.point, rs);
          });
        });

        //添加标记点击监听
        marker.addEventListener("click", function (e) {
          gc.getLocation(e.point, function (rs) {
            showLocationInfo(e.point, rs);
          });
        });

        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
        map.addOverlay(marker); //将标记添加到地图中
        //显示地址信息窗口
        function showLocationInfo(pt, rs) {
          var opts = {
            width: 250,     //信息窗口宽度
            height: 100,     //信息窗口高度
            title: ""  //信息窗口标题
          }
          var addComp = rs.addressComponents;
          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
          // eslint-disable-next-line no-undef
          var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
          marker.openInfoWindow(infoWindow);
        }
      })

    },
  },
};
</script>

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