<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form :inline="true" :model="pageInfo" size="medium">
        <el-form-item label="人员姓名">
          <el-input v-model="pageInfo.name" @keyup.enter.native="getList" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="getList">
            {{
            $t('message.energyManage.waybill.query')
            }}
          </el-button>
          <el-button
            type="warning"
            plain
            size="medium"
            @click="refresh"
          >{{$t('message.alarmValueSet.refresh')}}</el-button>
          <el-button type="primary" size="medium" @click="add">{{$t('message.videoManage.add')}}</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="List" height="520px">
        <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>

        <el-table-column prop="name" align="center" label="姓名"></el-table-column>

        <el-table-column prop="bodyTemperature" align="center" label="体温"></el-table-column>

        <el-table-column prop="workingArea" align="center" label="工作区域"></el-table-column>
        <el-table-column prop="nucleicDate" align="center" label="核酸监测日期"></el-table-column>
        <!-- width="300" -->
        <el-table-column prop="feverAndCough" align="center" label="是否发烧咳嗽">
          <template slot-scope="scope">{{scope.row.feverAndCough == 0 ? '没有' : '有'}}</template>
        </el-table-column>
        <el-table-column prop="travelHistory" align="center" label="是否疫情地旅居史">
          <template slot-scope="scope">{{scope.row.travelHistory == 0 ? '没有' : '有'}}</template>
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注"></el-table-column>

        <el-table-column :label="$t('message.alarmValueSet.operation')" align="center">
          <template slot-scope="scope">
            <div class="tableBtns">
              <div @click="edit(scope.row)" class="operationText">
                <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                <span>{{$t('message.alarmValueSet.edit')}}</span>
              </div>
              <div @click="deleteDev(scope.row)" class="operationText">
                <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
                <span>{{$t('message.alarmValueSet.delete')}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="Pagination-but">
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNo"
        :page-sizes="[10, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        background
      ></el-pagination>
    </div>

    <el-dialog
      :modal-append-to-body="false"
      @close="close"
      :title="$t('message.alarmValueSet.Popup_title')[Popup.type]"
      :visible.sync="Popup.show"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          v-if="Popup.type === 'add'||Popup.type === 'edit'"
          size="medium"
          :model="addEditForm"
          ref="addEditForm"
          label-width="120px"
          class="dialogFormBox"
          :rules="formRules"
        >
          <el-form-item label="人员姓名" prop="name">
            <el-input v-model="addEditForm.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="人员体温" prop="bodyTemperature">
            <el-input v-model="addEditForm.bodyTemperature" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="工作区域" prop="workingArea">
            <el-input v-model="addEditForm.workingArea" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="核算日期" prop="nucleicDate">
            <el-date-picker
              v-model="addEditForm.nucleicDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="是否发烧咳嗽" prop="feverAndCough">
            <el-radio-group v-model="addEditForm.feverAndCough">
              <el-radio label="1">有</el-radio>
              <el-radio label="0">没有</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否疫情地旅居史" prop="travelHistory">
            <el-radio-group v-model="addEditForm.travelHistory">
              <el-radio label="1">有</el-radio>
              <el-radio label="0">没有</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="备注">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="addEditForm.remark"></el-input>
          </el-form-item>

          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="Popup.show = false,
              thresholdswtich = false"
              icon="el-icon-circle-close"
              size="medium"
            >{{$t('message.alarmValueSet.cancel')}}</el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submit"
              size="medium"
            >{{$t('message.alarmValueSet.save')}}</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  epidaddApi,
  epideditApi,
  epidpageApi,
  epidqueryByIdApi,
  epiddeleteApi
} from "@/assets/js/api/epidemicPrevention.js";
export default {
  mounted() {
    this.getList();
  },
  data() {
    return {
      // 搜索
      addEditForm: {
        name: "",
        bodyTemperature: "",
        workingArea: "",
        nucleicDate: "",
        feverAndCough: "0",
        travelHistory: "0",
        remark: ""
      },
      formRules: {
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        bodyTemperature: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        nucleicDate: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        feverAndCough: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        travelHistory: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        nucleicDate: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ]
        // enabled: [
        //   {
        //     required: true,
        //     message: "请选择",
        //     trigger: "blur"
        //   }
        // ],
        // enterpriseIds: [
        //   {
        //     required: true,
        //     message: "请选择",
        //     trigger: "blur"
        //   }
        // ],
        // deviceAddress: [
        //   {
        //     required: true,
        //     message: "请输入",
        //     trigger: "blur"
        //   }
        // ],
        // camera: [
        //   {
        //     required: true,
        //     message: "请选择",
        //     trigger: "blur"
        //   }
        // ],
        // alarmPusher: [
        //   {
        //     required: true,
        //     message: "请选择",
        //     trigger: "blur"
        //   }
        // ],
        // lng: [
        //   {
        //     required: true,
        //     message: "请输入",
        //     trigger: "blur"
        //   }
        // ],
        // lat: [
        //   {
        //     required: true,
        //     message: "请输入",
        //     trigger: "blur"
        //   }
        // ]
      },
      List: [],
      Popup: {
        type: "add",
        show: false
      },
      // 分页查询
      pageInfo: {
        // 总条数
        total: 0,
        // 当前页
        pageNo: 1,
        // 每页条数
        pageSize: 10,
        // 人员姓名
        name: ""
      },
      // 阈值
      thresholdswtich: false
    };
  },
  methods: {
    handle(type, show) {
      //打开弹窗前的统一处理
      this.Popup = {
        type: type,
        show: show
      };
    },
    Change() {},
    add() {
      this.handle("add", true);
    },
    edit(obj) {
      console.log("编辑", obj);
      // 查询单条
      this.getonespeed(obj.id);
      this.handle("edit", true);
    },
    onsholdswtich(obj) {
      this.handle("edit", true);
      // 查询单条
      this.getonespeed(obj.id);
      this.thresholdswtich = true;
    },
    deleteDev(obj) {
      console.log("删除", obj);
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          obj.name +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cancelButtonText"
          ),
          type: "warning"
        }
      )
        .then(() => {
          epiddeleteApi({ id: obj.id }).then(result => {
            if (result.success) {
              this.$message.success(result.message);
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    submit() {
      this.$refs["addEditForm"].validate(valid => {
        this.thresholdswtich = false;
        console.log("表单信息", this.addEditForm);

        if (valid) {
          let params = this.addEditForm;
          params.projectSn = this.$store.state.projectSn;
          if (this.Popup.type === "add") {
            epidaddApi(params).then(result => {
              if (result.success) {
                this.$message.success(result.message);
                this.getList();
              }
            });
          } else if (this.Popup.type === "edit") {
            console.log("编辑信息", this.addEditForm);
            epideditApi(params).then(result => {
              if (result.success) {
                this.$message.success(result.message);
                this.getList();
              }
            });
          }
          this.Popup.show = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    refresh() {
      this.pageInfo.name = "";
      this.pageInfo.pageNo = 1;
      this.pageInfo.pageSize = 10;
      this.getList();
    },
    getList() {
      epidpageApi(this.pageInfo).then(result => {
        if (result.success) {
          this.List = result.result.records;
          this.pageInfo.total = Number(result.result.total);
          // console.log("列表", result.result.records);
        }
      });
    },

    // 查单条
    getonespeed(id) {
      epidqueryByIdApi({ id: id }).then(result => {
        if (result.success) {
          console.log("设备测试-单条", result.result);
          this.addEditForm = result.result;
        }
      });
    },

    close() {
      this.addEditForm = {
        name: "",
        bodyTemperature: "",
        workingArea: "",
        nucleicDate: "",
        feverAndCough: "0",
        travelHistory: "0",
        remark: ""
      };
      console.log("关闭=====================");
      this.thresholdswtich = false;
    },

    // 分页 左右 点击 输入
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.getList();
    },

    // 分页多少条点击事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNo = val;
      this.getList();
    }
  }
};
</script>
<style lang="less">
.tableBtns {
  display: flex;
  justify-content: center;
}

.yj-dialogFormBox {
  width: 462px;
}

.fullHeight {
  position: relative;

  .Pagination-but {
    width: 100%;
    padding: 20px 0;
    // background: skyblue;
    position: absolute;
    bottom: 30px;
    right: 20px;

    display: flex;
    justify-content: center;
  }
}
</style>