<template>
  <div class="g-main">
    <div v-show="pageType == 'list'">
    <div class="m-search">
      <el-form :inline="true" :model="SearchData" :label-width="'100px'">
        <el-form-item label="表格名称">
          <el-input v-model.trim="SearchData.tableName" placeholder="请输入表格名称关键字" size="small"
            class="u-item-width-normal" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-select v-model.trim="SearchData.createPre" placeholder="请选择" size="small" class="u-item-width-normal"
            clearable>
            <el-option v-for="item in dicts.resident_category_import" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="SearchData.dateTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-row type="flex">
          <el-col :span="24" align="right">
            <el-button style="margin-left: 30px" size="small" type="primary " @click="handleSearch">查询</el-button>
            <el-button style="margin-left: 10px" is-plain class="diy-button--white el-button--default" size="small"
              @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="m-table">
      <div class="div_btn">
        <el-button size="small" @click="handleAdd" type="primary" icon="el-icon-plus">新建导出</el-button>
        <el-button size="small" @click="handleAdd" type="primary" icon="el-icon-plus">导出</el-button>
      </div>
      <el-table :data="tableData" border v-loading="tableLoading" class="m-table-item" style="width: 100%"
        :height="maxTableHeight">
        <el-table-column type="selection" fixed="left" align="center" width="50" />
        <el-table-column prop="tableName" align="center" label="表格名称" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="jilu" align="center" width="150" label="导出记录" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button style="width: 100%" type="text" @click="showAwoList(scope.row.jilu)">1</el-button>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="processStatus" align="center" width="200" label="状态"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{ binaryText(scope.row.processStatus) }}</span>
                        </template>
                    </el-table-column> -->
        <el-table-column prop="importSuccessNum" align="center" width="80" label="创建人" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="importFailNum" align="center" width="80" label="创建时间" :show-overflow-tooltip="true">
        </el-table-column>
        <!-- <el-table-column prop="createdByName" align="center" width="100" label="操作人"
                        :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="completedTime" align="center" width="180" label="操作完成时间"
                        :show-overflow-tooltip="true"> -->
        <!-- </el-table-column> -->
        <el-table-column fixed="right" label="操作" align="center" width="220">
          <template slot-scope="scope">
            <!-- <el-button @click="handleCloseImport(scope.row)"
                                v-if="scope.row.importCategory === 'processing'" type="text"
                                size="small">取消导入</el-button> -->
            <!-- <el-button @click="handleCloseCheck(scope.row)"  v-if="scope.row.importCategory === 'processing'" type="text" size="small">确认完成</el-button> -->
            <el-button @click="handleDetail(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="handleDetail(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
          :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" layout="sizes, prev, pager, next, total"
          :total="total">
        </el-pagination>
      </div>
    </div>
    </div>
    <div  v-show="pageType == 'set'">
      <exportSetting />
      <!-- <div class="m-search">
            <el-form :inline="true" class="header_form_box" :model="form" :label-width="'105px'">
        <el-form-item label="居民分类">
          <el-cascader
          ref="categoryAll"
          size="small"
          class="u-item-width-normal"
          v-model.trim="categoryAll" 
          :options="categoryAllList"
          :props="{ multiple: true,checkStrictly: true,emitPath:false}"
          collapse-tags
          clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-select v-model.trim="form.partyFlag" class="u-item-width-normal" clearable size="small">
            <template v-for="item in partyList">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="健康状态">
          <el-select v-model.trim="form.healthStatus" collapse-tags multiple class="u-item-width-normal" clearable
            size="small">
            <template v-for="item in healthStatusList">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="关注人群">
          <el-cascader
          size="small"
          class="u-item-width-normal"
          v-model.trim="form.attentionCrowds" 
          :options="resiClass"
          :props="{ multiple: true,checkStrictly: true,emitPath:false}"
          collapse-tags
          clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="特殊人群">
          <el-select v-model.trim="form.specialCategoryCodes" class="u-item-width-normal" clearable size="small" collapse-tags
            multiple>
            <template v-for="item in specialCategoryList">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="就业状态">
          <el-select v-model.trim="form.careerStatus" class="u-item-width-normal" clearable size="small">
            <template v-for="item in careerStatusList">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="身份">
          <el-select v-model.trim="form.identity" class="u-item-width-normal" clearable size="small" >
            <template v-for="item in projectStaffList">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="人户状况">
          <el-select v-model.trim="form.householdSituation" class="u-item-width-normal" clearable size="small">
            <template v-for="item in household">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="人房关系">
          <el-select v-model.trim="form.resiHouseRel" class="u-item-width-normal" clearable size="small">
            <template v-for="item in resiHouseRelList">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="名称模糊查询">
          <el-select v-model.trim="basicType" class="u-item-width-service" clearable size="small">
            <template >
              <el-option @click.native="handelClickBasicType" :label='item.label' :value='item.value' v-for="(item, index) in basicInfoList" :key="index"> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item v-for="(item, index) in basicInfoList" :key="index" v-if="basicType == item.value">
          <el-input v-model.trim="form[item.value]" class="u-item-width-service" placeholder="请输入" clearable size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="满意度次数">
          <el-select v-model.trim="form.satisfactionNum" class="u-item-width-normal" clearable size="small">
            <template v-for="(item,index) in 6">
              <el-option :label='`${index}次`' :value='index'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="居民年龄">
          <el-input v-model.trim="form.ageStart" @change="handleAgeChange" class="u-item-width-daterange" placeholder="请输入" clearable size="small">
          </el-input>
          <span class="u-data-tag">至</span>
          <el-input v-model.trim="form.ageEnd" @change="handleAgeChange" class="u-item-width-daterange u-data-tag"
            placeholder="请输入" clearable size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model.trim="form.gender" class="u-item-width-normal" clearable size="small">
            <el-option label='男' value='1'> </el-option>
            <el-option label='女' value='2'> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文化程度">
          <el-select v-model.trim="form.cultureLevel" class="u-item-width-normal" clearable size="small">
            <template v-for="item in Education">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="国籍">
          <el-select v-model.trim="form.nationality" class="u-item-width-normal" clearable size="small">
            <template v-for="item in nationalityList">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="民族">
          <el-select v-model.trim="form.nation" class="u-item-width-normal" clearable size="small">
            <template v-for="item in nation">
              <el-option :label='item.label' :value='item.value'> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="完整度得分">
          <el-input v-model.trim="form.integrityScoreFrom"  typ="number" @change="informationChange(form.integrityScoreFrom,'from')" class="u-item-width-daterange" placeholder="请输入" clearable size="small">
          </el-input>
          <span class="u-data-tag">至</span>
          <el-input v-model.trim="form.integrityScoreTo"  @change="informationChange(form.integrityScoreTo,'to')"  class="u-item-width-daterange u-data-tag"
            placeholder="请输入" typ="number" clearable size="small">
          </el-input>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-date-picker v-model.trim="form.updateTimeStart" type="datetime" size="small" class="u-item-width-daterange"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始日期" :picker-options="pickerOptionsStart">
          </el-date-picker>
          <span class="u-data-tag">至</span>
          <el-date-picker v-model.trim="form.updateTimeEnd" type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss"
            class="u-item-width-daterange u-data-tag" placeholder="结束日期" :picker-options="pickerOptionsEnd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="width:100px;text-align: right;padding-right:14px;display: inline-block; ">所属组织:</span>
          <el-cascader class="u-item-width-normal"
                       size="small"
                       ref="myCascader"
                       v-model="form.agencyId"
                       :options="orgOptions"
                       :props="orgOptionProps"
                       :show-all-levels="false"
                       @change="handleChangeAgency"
                       clearable></el-cascader>
        </el-form-item>
        <el-form-item prop="villageId">
          <div class="resi-cell">
            <div class="resi-cell-value">
              <span style="width:100px;text-align: right;padding-right:14px;display: inline-block; ">所属房屋:</span>
              <el-select v-model.trim="form.villageId"
                         placeholder="请选择小区"
                         size="small"
                         filterable
                         clearable
                         class="u-item-width-communitycascader"
                         @clear="handleClearVillage"
                         @change="handleChangeV"
                         v-el-select-loadmore="loadmore"
                         >
                <el-option v-for="item in optionsV"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model.trim="form.buildId"
                         placeholder="楼号"
                         size="small"
                         filterable
                         clearable
                         style="margin-left: 5px"
                         class="u-item-width-buildcascader"
                         :disabled="changeVDisabled"
                         @clear="handleClearBuild"
                         @change="handleChangeB">
                <el-option v-for="item in optionsB"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model.trim="form.unitId"
                         :disabled="changeBDisabled"
                         placeholder="单元"
                         size="small"
                         filterable
                         clearable
                         style="margin-left: 5px"
                         class="u-item-width-buildcascader"
                         @click="handleClearDan"
                         @change="handleChangeD">
                <el-option v-for="item in optionsD"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model.trim="form.homeId"
                         :disabled="changeDDisabled"
                         placeholder="房号"
                         size="small"
                         filterable
                         clearable
                         style="margin-left: 5px"
                         class="u-item-width-buildcascader">
                <el-option v-for="item in optionsH"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model.trim="form.remark" placeholder="请输入" size="small" class="u-item-width-normal"
            clearable></el-input>
        </el-form-item>
           </el-form>
    
      </div> -->
      <!-- <Records ref="RecordsForm"   /> -->
    <!-- <el-card class="resi-card"> -->
    <!-- <el-card class="resi-card"> -->
  
    </div>
    <el-dialog :destroy-on-close="true" :modal="true" :visible.sync="showDialog"  width="60%" top="5vh"
      @close="handleClose" title="导出记录">
      <Records ref="RecordsForm"   />
    </el-dialog>
  </div>
  <!-- <div v-if="pageType == 'add'">
            :eventDetailData="eventDetailData"
            <smart-import-info ref="eleEditForm" :pageType="pageType" @handleClose="handleClose" @handleOk="handleOk"
                :fileCodeRow="fileCode" :taskId="taskId" :processStatus="processStatus" />
        </div> -->
  <!-- </div> -->
</template>
    
  <script>
  import { requestPost } from "@/js/dai/request";
  import { genderList, binaryOptionList } from "@/js/columns/constants";
  import nextTick from "dai-js/tools/nextTick";
  import { mapGetters } from "vuex";
  import Records from "./Records.vue"
  import axios from "axios";
  import exportSetting  from "./exportSetting.vue"
//   import smartImportInfo from "./cpts/smartImportInfo";
  export default {

  
    data() {
      return {
        form: {
        name: '',
        mobile: '',
        updateCategory:null,
        satisfactionNum:null,
        idNum: '',
        birthdayStart: '',
        birthdayEnd: '',
        ageStart: '',
        ageEnd: '',
        integrityScoreFrom: null,//居民信息完整度はじめ
        integrityScoreTo: null,//居民信息完整度end
        identity:null,
        gender: '',
        cultureLevel: '',
        localResidenceFlag: '',
        householdSituation: '',
        nation: '',
        agencyId: '',
        buildId: '',
        homeId: '',
        unitId: '',
        gridId: '',
        villageId: '',
        attentionCrowds: [],
        healthStatus: [],
        nationality: '',
        resiHouseRel: '',
        partyFlag: '',
        updateTimeStart: '',
        updateTimeEnd: '',
        specialCategoryCodes: [],
        remark: '',
        level: '',
        orgType: ''
      },
        categoryAllList:[
        {
          label:'群众',
          value:'partyFlag0',
        },{
          label:'流动人员',
          value:'FLOATING_FLAG',
        },{
          label:'党员',
          value:'partyFlag1',
        },{
          label:'共青团员',
          value:'partyFlag2',
        },{
          label:'残疾人',
          value:'DISABILITY_FLAG',
        },{
          label:'大病',
          value:'SERIOUS_ILLNESS_FLAG',
        },{
          label:'慢病',
          value:'CHRONIC_DISEASE_FLAG',
        },{
          label:'老年人',
          value:'OLD_PEOPLE_FLAG',
          children:[
          {
              label: "失能老人",
              value: "DISABLED_FLAG",
          }, {
              label: "空巢老人",
              value: "EMPTY_NESTER_FLAG",
          },
          {
              label: "失智老人",
              value: "DEMENTED_FLAG",
          },
          {
              label: "独居老人",
              value: "LIVE_ALONE_FLAG",
          },
          {
              label: "普通老年人",
              value: "OLD_PEOPLE_FLAG",
          }
          ]
        },{
          label:'低保人员',
          value:'SUBSISTENCE_ALLOWANCE_FLAG',
        },{
          label:'退役军人',
          value:'VETERAN_FLAG',
        },{
          label:'保障房人员',
          value:'ENSURE_HOUSE_FLAG',
        },{
          label:'育龄妇女',
          value:'FERTILE_WOMAN_FLAG',
        },{
          label:'特扶人员',
          value:'SPECIAL_SUPPORT_FLAG',
        },{
          label: "留守儿童",
          value: "LBC_FLAG",
          children: null
        },{
          label: "艾滋病人员",
          value: "AIDS_FLAG",
          children: null
        },{
          label:'失业人员',
          value:'UNEMPLOYED_FLAG',
        },{
          label:'新阶层人士',
          value:'NEW_STRATUM_FLAG',
        },{
        label: "新就业群体",
        value: "NEG_FLAG",
        "children": null    
      },{
         label:'安置帮教人员',
          value:'anzhibangjiao',
        },{
          label:'吸毒人员',
          value:'xidurenyuan',
        },{
          label:'社区矫正人员',
          value:'shequjiaozheng',
        },{
          label:'不良青少年',
          value:'buliangqingshaonian',
        },{
          label:'肇事肇祸精神障碍患者',
          value:'zhaoshizhaohuojingshenbing',
        },{
          label:'邪教人员',
          value:'xiejiaorenyuan',
        },{
          label:'信访人员',
          value:'xinfangrenyaun',
        },{
          label:'统战人员',
          value:'tongzhanrenyuan',
        },{
          label:'志愿者',
          value:'VOLUNTEER_FLAG',
        },{
          label:'网格员',
          value:'GRID_MEMBER_FLAG',
        },{
          label:'楼长',
          value:'BUILDING_CHIEF_FLAG',
        },{
          label:'单元长',
          value:'UNIT_CHIEF_FLAG',
        },{
          label:'公益岗',
          value:'PUBLIC_WELFARE_FLAG',
        }
      ],
        showDialog:false,
            SearchData:[],
            tableName:"",
            createPre:"",
            dateTime:"",
        tableLoading: false,
        searchH: 170,
        tableData: [],
        genderList,
        binaryOptionList,
        formData: {},
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        pageType: "list", // 列表list 新增add  详情detail
  
        dicts: {
          import_status:[],
          resident_category_import:[],
        }, //字典对象
  
        fileCode:null,
        taskId:null,
        processStatus:null,
      };
    },
    components: {Records,exportSetting},
    computed: {
      maxTableHeight() {
        const h = this.clientHeight - this.searchH - 330 + this.iframeHeight;
        const _h = this.clientHeight - 330 - this.searchH;
        return this.$store.state.inIframe ? h : _h;
      },
      ...mapGetters(["clientHeight", "iframeHeight"]),
    },
    watch: {},
    async created() {
      await this.getDicts();
    },
    mounted() {
      this.getTableData();
    },
    methods: {
      showAwoList(row){
        this.showDialog=true
      },
      // --------------------------------------字典------------------------------------------
      async getDicts() {
        try {
          const dictTypes = ["import_status", 'resident_category_import']; // 把所有dictType放在这个数组里
          const requests = dictTypes.map((dictType) => {
            return this.$http.post("sys/dict/data/dictlist", {
              dictType: dictType,
            });
          });
          const results = await Promise.all(requests);
          results.forEach((result, index) => {
            if (result.data.code === 0) {
              this.dicts[dictTypes[index]].push(...result.data.data);
            } else {
              console.log(`获取${dictTypes[index]}字典失败: ${result.msg}`);
            }
          });
        } catch (error) {
          console.log("获取字典失败: ", error);
        }
      },
      binaryText(value) {
        let text = "";
        let foundItem = this.dicts.import_status.filter(
          (item) => item.value == value
        )[0];
        text = foundItem ? foundItem.label : "--";
        return text;
      },
      // ------------------------------------事件------------------------------------------
      // 搜索事件
      handleSearch(val) {
        console.log(this.formData);
        this.pageNo = 1;
        this.getTableData();
      },
  
      //   调出新增组件
      async handleAdd() {
        this.pageType = "set";
        this.fileCode = null;
      },
      //   查看详情触发事件
      async handleDetail(row) {
        this.pageType = "add";
        const {taskId,fileCode,processStatus} = row;
        this.taskId = taskId;
        this.fileCode = fileCode;
        this.processStatus = processStatus;
      },
     
      //  新增弹出框组件取消事件
      handleClose() {
        // this.pageType = "list";
        // this.processStatus = null;
        // this.pageNo = 1;
        // this.getTableData();
        this.showDialog=false
      },
      //  新增弹出框组件确定事件
      handleOk(type) {
       
      },
      //   删除触发事件
      async handleDel(row) {
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.cancelFuwu([row.categorizedResiId]);
          })
          .catch((err) => {
            if (err == "cancel") {
              // this.$message({
              //   type: "info",
              //   message: "已取消删除"
              // });
            }
          });
      },
      //   删除处理
      async cancelFuwu(id) {
        const url = "/actual/base/resiCategorized/disability/deleteBatch";
        const { data, code, msg } = await requestPost(url, id);
        if (code === 0) {
          this.$message.success("删除成功！");
          this.getTableData();
        } else {
          this.$message.error("操作失败！");
        }
      },
      //   获取列表
      async getTableData() {
        this.tableLoading = true;
        const url = "/commonservice/import-task/pageList";
        const { pageSize, pageNo, formData } = this;
        const { data, code, msg } = await requestPost(url, {
          pageSize,
          pageNo,
          ...formData,
        });
        this.tableLoading = false;
        if (code === 0) {
          this.total = data.total || 0;
          this.tableData = data.list;
        } else {
          this.$message.error(msg);
        }
      },
  
      //   分页
      handleSizeChange(val) {
        this.pageSize = val;
        window.localStorage.setItem("pageSize", val);
        this.getTableData();
      },
  
      //   分页
      handleCurrentChange(val) {
        this.pageNo = val;
        this.getTableData();
      },
      //   重置
      resetSearch() {
        this.formData = {};
  
        this.pageNo = 1;
        this.getTableData();
      },
    },
  
    props: {},
  };
  </script>
  <style lang="scss" scoped>
  // @import "@/assets/scss/buttonstyle.scss";
  @import "@/assets/scss/modules/management/list-main.scss";
  .resi-container .resi-cell {
  display: flex;
  align-items: center;

  .resi-cell-label {
    flex-shrink: 0;
    min-width: 70px;
    box-sizing: border-box;
    margin-right: 15px;
    text-align: right;
    // line-height: 32;
  }

  .resi-cell-label1 {
    width: max-content;
  }

  .resi-cell-value-radio {
    display: flex;
    align-items: center;
    min-height: 32px;
  }

  .resi-cell-input {
    max-width: 200px;
  }

  .resi-cell--daterange {
    max-width: 240px;
  }

  .el-form--inline {
    ::v-deep .el-form-item {
      margin-right: 0px !important;
    }
  }

  .resi-cell-select {
    max-width: 200px;
    box-sizing: border-box;

    &-middle {
      width: 130px;
    }

    &-small {
      width: 88px;
    }
  }

  .resi-cell-select:last-child {
    margin-right: 0;
  }
}
.header_form_box {
  display: flex;
  flex-wrap: wrap;
}

.resi-search {
  padding-bottom: 14px;

  .el-col {
    text-align: right;
  }
}

  </style>
    