<!--情况说明-->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
        <!-- 搜索表单 -->
      <search
        :searchForm="searchForm"
        :filterKeys="filterKeys"
        @search="searchData"
        @exportFile="exportFile"
        @filterColumns="changeFilter"
        :visiable="visiable"
        :loading="loading"
      />
      
      <ele-pro-table ref="table" row-key="drinkingWaterId" :datasource="datasource" :columns="columns" :where="where" @change="onChange"
        :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
          <template #county="{text}">
            {{text="市区"}}
          </template>

        <template #enumber="{ text, record ,index }">
            <div class="editable-cell">
                <div v-if="editableData[index] && editableData[index].edable=='index3'" class="editable-cell-input-wrapper">
                  <a-input class="edit-input" v-model:value="editableData[index]['index3']" @pressEnter="save(index)" />
                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
                </div>
                <div v-else class="editable-cell-text-wrapper">
                    {{ text || ' ' }}
                    <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index3')" />
                </div>
            </div>
        </template>

        <template #wnumber="{ text, record ,index }">
            <div class="editable-cell">
                <div v-if="editableData[index] && editableData[index].edable=='index4'" class="editable-cell-input-wrapper">
                  <a-input class="edit-input" v-model:value="editableData[index]['index4']" @pressEnter="save(index)" />
                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
                </div>
                <div v-else class="editable-cell-text-wrapper">
                {{ text || ' ' }}
                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index4')" />
                </div>
            </div>
        </template>

        <template #desc="{ text, record ,index }">
            <div class="editable-cell">
                <div v-if="editableData[index] && editableData[index].edable=='index6'" class="editable-cell-input-wrapper">
                  <a-input class="edit-input" v-model:value="editableData[index]['index6']" @pressEnter="save(index)" />
                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
                </div>
                <div v-else class="editable-cell-text-wrapper">
                {{ text || ' ' }}
                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'index6')" />
                </div>
            </div>
        </template>

        <template #remark="{ text, record ,index }">
            <div class="editable-cell">
                <div v-if="editableData[index] && editableData[index].edable=='remark'" class="editable-cell-input-wrapper">
                  <a-textarea class="edit-input" v-model:value="editableData[index]['remark']" @pressEnter="save(index)" />
                  <check-outlined class="editable-cell-icon-check" @click="save(index)" />
                </div>
                <div v-else class="editable-cell-text-wrapper">
                {{ text || ' ' }}
                <edit-outlined class="editable-cell-icon" @click="edit(record,index,'remark')" />
                </div>
            </div>
        </template>


      </ele-pro-table>

    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
import XLSX from "xlsx";
import {
  countyDescripFormData
} from "@/api/ecology/new-drinking-water";

import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
// import { tableColumns } from "./colums";
// import moment from "moment";

import Search from "./../components/countySearch.vue";
import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
export default {
  name: "DrinkingWaterBase",
  components: {
      Search,
      CheckOutlined,
      EditOutlined,
  },
    props:{
        // 表格搜索条件
        searchForm:{
            typeof:Object,
            default: function () {
                return {}
            },
        },
        filterKeys:{
            typeof:Object,
            default: function () {
                return []
            },
        },
      visiable:{
          typeof:Boolean
      }
    },
  
  data() {
    return {
      data: [],
      locale,
      bill: {},
      editableData:[],
      // 表格数据接口
      datasource:[],
      selection: [],
      columns:[
        {key: "index",title:"序号",dataIndex: "index",width: 48,align: "center",customRender: ({ index }) => index + 1,},
        {title:"城市",dataIndex:"city",},
        {title:"县城",dataIndex:"county",slots:{customRender:'county'}},
        {title:"水源地名称",dataIndex:"sourceWaterName",},
        {title:"类型",dataIndex:"waterSourceProperty",},
        {title:"监测时间",dataIndex:"monitorTime"},
        //  {title:"监测时间",dataIndex:"reportTime",customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
        {title:"应当监测项目个数",dataIndex:'index1', },
        {title:"未测个数",dataIndex:"noCheckNum",},
        {title:"独立分析项目个数",dataIndex:"index3",
         slots: {
          customRender: 'enumber',
            },
        },
        {title:"外送分析项目个数",dataIndex:"index4",  slots: {
          customRender: 'wnumber',
            },},
        {title:"超标项目",dataIndex:"exceedingStandard",},
        {title:"情况说明或原因",dataIndex:"reason", slots: {
          customRender: 'desc',
            }},
        {title:"备注",dataIndex:"remark",slots: {
          customRender: 'remark',
            },},
      ],
        
        
      // 表格搜索条件
      where: {
        checked: 1,
        page:1,
        limit:10
      },
      // 表格选中数据
      selectionList: [],
      loading:false
    };
  },
  mounted() {
  },
  methods: {

    // 获取列表数据
    getPageData(){
            this.loading = true;
        countyDescripFormData(this.where).then(res=>{
                this.loading = false;
            if(res.data.code){
                this.$message.error(res.data.msg);
                this.datasource = []
            }else{
                this.datasource = res.data.data
            }
        }).catch(()=>{
                this.loading = false;
        })
    },

      //编辑单元格
    edit(item,index,key){
        this.editableData[index] = item
        this.editableData[index].edable=key
    },

    save(index){
//         console.log('item',this.editableData[index]['index3'])
// // console.log('item.remark', item.remark)
        this.datasource[index] = {...this.editableData[index]}
        this.editableData = []

    },

    JumpFieldClick(record, column) {
        console.log(column.dataIndex)
      },
    // 传上父级
    changeFilter(data){
        this.$emit('changeFilter',data)
    },
    // 执行搜索
    searchData(data){
        this.where = data;
        this.$emit("search", this.where);
        this.reload();
    },

      onChange(e,filters){
        this.datasource =  this.datasource.map(item=>(
            {
                ...item,
                index1:filters.index1
            }
        ))
    },
    
    /* 刷新表格 */
    reload() {
      this.getPageData()
      
        this.columns[6].filters = []
        if(this.where.waterSourceType ==1 ){
          // 地表水
          this.columns[6].filters =  [
            {
                text: '61',
                value: '61',
            },
                {
                text: '63',
                value: '63',
            },
                {
                text: '64',
                value: '64',
            },
        ]
      }
      if(this.where.waterSourceType ==2 ){
          // 地下水
           this.columns[6].filters =  [
            {
                text: '39',
                value: '39',
            },
                {
                text: '94',
                value: '94',
            }
        ]
      }

      // this.$refs.table.reload({
      //   where: this.where,
      // });
    },



    /* 重置搜索 */
    reset() {
      this.where = {
        checked: 1,
      };
      this.reload();
    },
    exportFile() {
      const columns = [
         ...this.columns,
      ];
      const arr = [];
      const th = columns.map((item) => item.title);
      arr.push(th);
      this.datasource.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">
.editable-cell-input-wrapper{
    display: flex;
    align-items: center;

    .edit-input{
        margin-right: 5px;
        width: 200px;
    }
}
.editable-cell-text-wrapper{
    display: flex;
    align-items: center;

}
</style>
