<template>
  <div class="resi-container">
    <el-card ref="searchCard" class="search-card">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <div>
          <el-form-item prop="gridId" label="所属网格" label-width="70px">
            <div class="resi-cell-value">
              <el-select
                      v-model.trim="dataForm.gridId"
                      placeholder="请选择网格"
                      size="small"
                      clearable
                      class="resi-cell-select"
                      @change="handleChangeGrid"
              >
                <el-option
                        v-for="item in optionsG"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="所属房屋">
            <div class="resi-cell-value">
              <div class="resi-cell-col">
                <el-form-item prop="villageId">
                  <el-select
                          v-model.trim="dataForm.villageId"
                          placeholder="请选择小区"
                          size="small"
                          clearable
                          class="resi-cell-select"
                          @change="handleChangeV"
                  >
                    <el-option
                            v-for="item in optionsV"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="buildId">
                  <el-select
                          v-model.trim="dataForm.buildId"
                          placeholder="楼号"
                          size="small"
                          clearable
                          :disabled="changeVDisabled"
                          class="resi-cell-select resi-cell-select-middle"
                          @change="handleChangeB"
                  >
                    <el-option
                            v-for="item in optionsB"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="unitId">
                  <el-select
                          v-model.trim="dataForm.unitId"
                          placeholder="单元"
                          size="small"
                          clearable
                          :disabled="changeBDisabled"
                          class="resi-cell-select resi-cell-select-middle"
                          @change="handleChangeD"
                  >
                    <el-option
                            v-for="item in optionsD"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="homeId">
                  <el-select
                          v-model.trim="dataForm.homeId"
                          placeholder="房号"
                          size="small"
                          clearable
                          :disabled="changeDDisabled"
                          class="resi-cell-select resi-cell-select-middle"
                  >
                    <el-option
                            v-for="item in optionsH"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>
        </div>
        <div>
        <el-form-item label="姓名" prop="name" label-width="70px">
          <el-input
                  v-model="dataForm.name"
                  placeholder="姓名"
                  clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input
                  v-model="dataForm.idCard"
                  placeholder="证件号"
                  clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input
                  v-model="dataForm.mobile"
                  placeholder="联系电话"
                  clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="是否接种" prop="isVaccination">
          <el-select v-model="dataForm.isVaccination" placeholder="是否接种" clearable>
            <el-option v-for="item in isVaccinationArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="diy-button--search" size="small" @click="getDataList()">{{ $t('query') }}</el-button>
          <el-button class="diy-button--reset" size="small" @click="resetForm()">重置</el-button
          >
        </el-form-item>
        </div>
      </el-form>
      </el-card>
      <el-card class="resi-card-table">
        <div class="resi-row-btn">

          <el-button class="diy-button--add" type="primary" size="small" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
          <el-button class="diy-button--export" size="small" @click="handleExportModule()">下载模板</el-button>
          <el-upload
                  ref="upload"
                  class="upload-btn"
                  :multiple="false"
                  :show-file-list="false"
                  :before-upload="
            (file) => {
              beforeUpload(file);
            }
          "
                  action=""
                  accept=".xls,.xlsx"
                  :http-request="
            () => {
              uploadFile();
            }
          "
          >
            <el-button
                    size="small"
                    class="diy-button--delete">导入</el-button>
          </el-upload>
          <el-button class="diy-button--reset" size="small" @click="handleExport">导出</el-button>
        </div>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                class="resi-table"
                @selection-change="dataListSelectionChangeHandle"
                style="width: 100%; height: 524px;overflow: auto;">
        <el-table-column label="序号" header-align="center" align="center" width="50px">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="gridName" label="网格名称" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="villageName" label="所属小区" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="buildName" label="所属楼宇" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="unitName" label="单元" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="homeName" label="房间名" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="householdTypeName" label="户口性质" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="姓名" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mobile" label="联系电话" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="idCard" label="证件号" header-align="center" align="center" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="isVaccinationName" label="是否接种" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="firstVacTime" label="第一次接种时间" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="firstVacSite" label="第一次接种地点" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="secondVacTime" label="第二次接种时间" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="secondVacSite" label="第二次接种地点" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="thirdVacTime" label="第三次接种时间" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="thirdVacSite" label="第三次接种地点" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="reason" label="原因" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="note" label="备注" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="checkStateName" label="审核状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="checkReason" label="审核理由" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="scope.row.checkState === '0'" type="text" size="small" class="div-table-button--edit" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button type="text" size="small" class="div-table-button--delete--noline" @click="handleDelete(scope.row.id)">{{ $t('delete') }}</el-button>
            <el-button v-if="scope.row.checkState === '0'" type="text" class="div-table-button--detail" size="small"
                    @click="handleWatch(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <icvaccineprarmeter-check v-if="checkVisible" ref="checkPage" @refreshDataList="getDataList"></icvaccineprarmeter-check>
  </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './icvaccineprarmeter-add-or-update'
import nextTick from "dai-js/tools/nextTick";
import { requestPost , requestGet} from "@/js/dai/request";
import IcvaccineprarmeterCheck from './icvaccineprarmeter-check'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/epmetuser/icVaccinePrarmeter/page',
        getDataListIsPage: true,
        deleteURL: '/epmetuser/icVaccinePrarmeter',
        deleteIsBatch: true
      },
      dataForm: {
          id: '',
          gridId: '',
          villageId: '',
          buildId: '',
          unitId: '',
          homeId: '',
          name: '',
          idCard: '',
          mobile: '',
          isVaccination: ''
      },
        isVaccinationArr: [
            { dictValue: '0', dictName: '否' },
            { dictValue: '1', dictName: '是' }
        ],
        optionsV: [],
        optionsB: [],
        optionsH: [],
        optionsD: [],
        optionsG: [],
        checkVisible: false
    }
  },
  components: {
    AddOrUpdate,
    IcvaccineprarmeterCheck
  },
  computed:{
      changeVDisabled() {
          return !this.dataForm.villageId
      },
      changeBDisabled() {
          return !this.dataForm.buildId
      },
      changeDDisabled() {
          return !this.dataForm.unitId
      }
  },
  mounted() {
      this.getGridList()
      this.getValiheList()
  },
  methods:{
      async handleDelete(id) {
          this.$confirm("确认删除?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                  this.deleteNat(id);
              })
              .catch((err) => {
                  if (err == "cancel") {
                  }
              });
      },
      async deleteNat(id) {
          const url = "/epmetuser/icVaccinePrarmeter/delete";
          let params = [id];
          const { data, code, msg } = await requestPost(url, params);
          if (code === 0) {
              this.$message({
                  type: "success",
                  message: "删除成功",
              });
              this.getDataList();
          } else {
              this.$message.error(msg);
          }
      },
      // 审核
      async handleWatch(row) {
          await nextTick();
          const url = "/gov/org/ichouse/checkHomeInfo";

          const { data, code, msg } = await requestPost(url, {
              gridId: row.gridId,
              gridName: row.gridName,
              villageName: row.villageName,
              buildName: row.buildName,
              unitName: row.unitName,
              homeName: row.homeName,
          });

          if (code === 0) {
              console.log("data----de", data);
              if(data.code === '1'){
                  this.$message.success(data.msg);
              }else{
                  // 打开审核页面
                  this.checkVisible = true
                  this.$nextTick(() => {
                      this.$refs.checkPage.dataForm.id = row.id
                      // 是否新增房屋：0：否；1：是
                      this.$refs.checkPage.isAdd = data.isAdd
                      // 单元ID
                      this.$refs.checkPage.unitId = data.unitId
                      this.$refs.checkPage.init()
                  })
              }






          } else {
              this.$message.success("操作失败！");
          }
      },
      handleClearVillage() {
          this.dataForm.buildId = ''
          this.dataForm.homeId = ''
      },
      handleClearBuild() {
          this.dataForm.buildId = ''
          this.dataForm.unitId = ''
          this.dataForm.homeId = ''
      },
      handleClearDan() {
          this.dataForm.unitId = ''
          this.dataForm.homeId = ''
      },
      handleChangeGrid(val) {
          console.log('val', val)
          this.dataForm.villageId = ''
          this.dataForm.buildId = ''
          this.dataForm.unitId = ''
          this.dataForm.homeId = ''
          this.getValiheList()
      },
      handleChangeV(val) {
          console.log('val', val)
          this.dataForm.buildId = ''
          this.dataForm.unitId = ''
          this.dataForm.homeId = ''
          this.getBuildList()
      },
      handleChangeB(val) {
          console.log('val', val)
          this.dataForm.unitId = ''
          this.dataForm.homeId = ''
          this.getUniList()
      },
      handleChangeD(val) {
          console.log('val', val)
          this.dataForm.homeId = ''
          this.getHouseList()
      },

      getGridList() {
          const { user } = this.$store.state
          this.$http
              .post('/gov/org/customergrid/gridoption', {
                  agencyId: user.agencyId,
                  purpose: 'query'
              })
              .then(({ data: res }) => {
                  if (res.code !== 0) {
                      return this.$message.error(res.msg)
                  } else {
                      console.log('获取查询详情成功', res.data)
                      this.optionsG = res.data
                  }
              })
              .catch(() => {
                  return this.$message.error('网络错误')
              })
      },
      getValiheList() {
          const { user } = this.$store.state
          this.$http
              .post('/gov/org/icneighborhood/neighborhoodoption', {
                  gridId: this.dataForm.gridId,
                  agencyId: ''
                  // agencyId: user.agencyId
              })
              .then(({ data: res }) => {
                  if (res.code !== 0) {
                      return this.$message.error(res.msg)
                  } else {
                      console.log('获取查询详情成功', res.data)
                      this.optionsV = res.data
                  }
              })
              .catch(() => {
                  return this.$message.error('网络错误')
              })
      },
      getBuildList() {
          this.$http
              .post('/gov/org/icbuilding/buildingoption', {
                  neighborHoodId: this.dataForm.villageId
              })
              .then(({ data: res }) => {
                  if (res.code !== 0) {
                      return this.$message.error(res.msg)
                  } else {
                      console.log('获取查询详情成功', res.data)
                      this.optionsB = res.data
                  }
              })
              .catch(() => {
                  return this.$message.error('网络错误')
              })
      },
      getUniList() {
          this.$http
              .post('/gov/org/icbuildingunit/unitoption', {
                  buildingId: this.dataForm.buildId
              })
              .then(({ data: res }) => {
                  if (res.code !== 0) {
                      return this.$message.error(res.msg)
                  } else {
                      console.log('获取查询详情成功', res.data)
                      this.optionsD = res.data
                  }
              })
              .catch(() => {
                  return this.$message.error('网络错误')
              })
      },
      getHouseList() {
          this.$http
              .post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId })
              .then(({ data: res }) => {
                  if (res.code !== 0) {
                      return this.$message.error(res.msg)
                  } else {
                      console.log('获取查询详情成功', res.data)
                      this.optionsH = res.data
                  }
              })
              .catch(() => {
                  return this.$message.error('网络错误')
              })
      },
      //重置搜索条件
      resetForm() {
          this.dataForm = {
              gridId: '',
              villageId: '',
              buildId: '',
              unitId: '',
              homeId: '',
              name: '',
              idCard: '',
              mobile: '',
              isVaccination: ''
          };
          this.pageNo = 1
      },
      // 上传文件之前的钩子
      beforeUpload(file) {
          this.files = file;

          const isText = file.type === "application/vnd.ms-excel";
          const isTextComputer =
              file.type ===
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

          if (!isText && !isTextComputer) {
              this.$message.error("请选择正确格式的文件");
              this.files = null;
              this.fileName = "";
              return false;
          } else {
              this.fileName = file.name;
              return true;
          }
      },
      async uploadFile() {
          if (this.fileName == "") {
              this.$message.warning("请选择要上传的文件！");
              return false;
          }

          this.$message({
              showClose: true,
              message: "导入中，请到系统管理-导入记录中查看进度",
              duration: 0,
          });

          //清空上传列表
          this.$refs["upload"].clearFiles();
          let url = "";

          let fileFormData = new FormData();
          fileFormData.append("file", this.files); //filename是键，file是值，就是要传的文件，test.zip是要传的文件名

          url = "/epmetuser/icVaccinePrarmeter/importFile";

          window.app.ajax.post2(
              url,
              fileFormData,
              (data, rspMsg) => {
                  if (data.code === 0 && data.msg == "success") {
                      // this.$message.success('导入成功')
                  } else {
                      // this.$message({
                      //   showClose: true,
                      //   message: rspMsg,
                      //   duration: 0,
                      //   type: "error"
                      // })
                      // this.$message.error(rspMsg)
                  }
                  this.loadTable();
              },
              (rspMsg, data) => {},
              { headers: { "Content-Type": "multipart/form-data" } }
          );
      },
      //导出表格
      async handleExport() {
          let title = "新冠病毒疫苗接种人员信息台账";

          const url = "/epmetuser/icVaccinePrarmeter/vaccine-export";

          app.ajax.exportFilePost(
              url,
              this.dataForm,
              (data, rspMsg) => {
                  console.log(data)
                  this.download(data, title + ".xlsx");
              },
              (rspMsg, data) => {
                  this.$message.error(rspMsg);
              }
          );
      },
      // 下载文件
      download(data, fileName) {
          if (!data) {
              return;
          }

          var csvData = new Blob([data]);

          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(csvData, fileName);
          }
          else {
              var a = document.createElement("a");
              document.body.appendChild(a);
              a.style = "display: none";
              var url = window.URL.createObjectURL(csvData);
              a.href = url;
              a.download = fileName;
              a.click();
              a.remove();
              window.URL.revokeObjectURL(url);
          }
      },
      handleExportModule() {
          let title = "新冠病毒疫苗接种人员信息台账模板";
          let url = "/epmetuser/icVaccinePrarmeter/exporttemplate";

          let params = {};

          app.ajax.exportFilePost(
              url,
              params,
              (data, rspMsg) => {
                  this.download(data, title + ".xls");
              },
              (rspMsg, data) => {
                  this.$message.error(rspMsg);
              }
          );
      },
  }
}
</script>
<style lang="scss" scoped>
  @import '@/assets/scss/buttonstyle.scss';
  @import "@/assets/scss/modules/visual/communityManage.scss";
  @import "@/assets/scss/modules/management/list-main.scss";

  .resi-container .resi-card-table {
    ::v-deep .el-table th {
      color: #fff;
      background-color: rgba(33, 149, 254, 1);
      // border-right: 1px solid rgba(33, 149, 254, 1);
    }
  }
  .resi-table {
    ::v-deep .el-button--text {
      text-decoration: underline;
    }
  }
  .resi-card-table {
    margin-top: 20px;
  }
  .resi-row-btn {
    margin-bottom: 13px;
    .upload-btn {
      display: inline-block;
      margin: 0 10px;
    }
  }

  .resi-btns {
    margin-top: 20px;
    text-align: center;
  }

  .resi-container .resi-card {
    position: relative;
    overflow: visible;
  }

  .demo-form-inline {
    // display: flex;
    // align-items: center;
    // margin-bottom: 20px;

    .resi-cell-label {
      flex-shrink: 0;
      min-width: 0;
      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 {
      width: 200px;
    }
    .resi-cell--daterange {
      max-width: 260px;
    }
    .resi-cell-select {
      width: 200px;
      box-sizing: border-box;
      margin-right: 10px;
      &-middle {
        width: 120px;
      }
      &-small {
        width: 88px;
      }
    }
    .resi-cell-select:last-child {
      margin-right: 0;
    }
  }

  .mt10 {
    margin-top: 10px;
  }
</style>
