<template>
  <div>
    <!-- 操作行 -->
    <div class="option-div">
      <!-- {{ searchParams }} -->
      <el-button type="primary" @click="toAdd">登记</el-button>
      <el-button type="danger" @click="toBatchDelete">批量启用或禁用</el-button>
      <el-input
        style="width: 150px"
        placeholder="请输入栏圈名称"
        v-model="searchParams.hName"
        clearable
      >
      </el-input>
      <!-- --{{ options }}-- -->
      <el-select
        style="width: 200px"
        v-model="searchParams.hMax"
        clearable
        placeholder="请选择栏圈容量"
      >
        <el-option v-for="item in max" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <el-select
        style="width: 200px"
        v-model="searchParams.fhName"
        clearable
        placeholder="请选择所属栏圈"
      >
        <el-option
          v-for="item in batchData"
          :key="item.fhId"
          :label="item.fhName"
          :value="item.fhName"
        >
        </el-option>
      </el-select>
      <el-select
        style="width: 200px"
        v-model="searchParams.hEnable"
        clearable
        placeholder="请选择是否可用"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="text" @click="toSearch">搜索</el-button>
    </div>
    <!--table  -->

    <div>
      {{ multipleSelection }}
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="编号" width="50"></el-table-column>
        <el-table-column prop="hName" label="栏圈名称" width="180">
        </el-table-column>
        <el-table-column prop="hTime" label="创建时间"> </el-table-column>
        <el-table-column prop="hMax" label="栏圈容量" width="180">
        </el-table-column>

        <el-table-column prop="managerFenceHouse.fhName" label="所属栏舍">
        </el-table-column>
        <el-table-column prop="hEnable" label="状态">
          <template slot-scope="scope">
            <span
              :style="{
                backgroundColor: scope.row.hEnable === '可用' ? 'green' : 'red',
                color: 'white',
                padding: '5px 10px',
                borderRadius: '5px',
              }"
              >{{ scope.row.hEnable }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="hDesc" label="栏圈描述"> </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row)">{{
              scope.row.hEnable == "可用" ? "禁用" : "启用"
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- page -->
    <div class="div-page">
      {{ pageParams }}
      <el-pagination
        background
        :current-page.sync="pageParams.pageNum"
        :page-sizes="[3, 5, 10, 20]"
        :page-size.sync="pageParams.pageSize"
        layout="total,prev, pager, next, sizes"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 抽屉 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <!-- {{ ruleForm }} -->
      <br />

      <!-- {{ batchData }} -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="栏圈名称" prop="hName">
          <el-input
            v-model="ruleForm.hName"
            placeholder="请输入栏圈名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="栏圈容量" prop="hMax">
          <el-input
            v-model="ruleForm.hMax"
            placeholder="请输入栏圈容量"
          ></el-input>
        </el-form-item>
        <el-form-item label="栏圈状态" prop="hEnable">
          <el-radio-group v-model="ruleForm.hEnable">
            <el-radio label="禁用"></el-radio>
            <el-radio label="可用"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属栏舍" prop="hFenceId">
          <el-select v-model="ruleForm.hFenceId" placeholder="请选择所属栏舍">
            <el-option
              v-for="item in batchData"
              :key="item.fhId"
              :label="item.fhName"
              :value="item.fhId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栏圈描述" prop="hDesc">
          <el-input
            v-model="ruleForm.hDesc"
            placeholder="请填写栏圈描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" required prop="hTime">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="ruleForm.hTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button
          >
          <el-button @click="toCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { upFileUrl } from "@/utils/common";
import { get } from "@/utils/request";

import {
  findByPage,
  saveOrUpdate,
  changeStatus,
  changeStatusBatch,
} from "@/api/hurdles";
export default {
  data() {
    return {
      judge: "",
      radio: 0,
      upFileUrl,
      // 批次数据
      batchData: [],
      max: [],
      imageUrl: "",

      ruleForm: {
        hName: "",
        hMax: 0,
        hEnable: "",
        hFenceId: "",
        hDesc: "",
        hTime: "",
      },

      rules: {
        hName: [{ required: true, message: "请输入栏圈名称", trigger: "blur" }],
        hMax: [{ required: true, message: "容量不能为空", trigger: "blur" }],
        hEnable: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        hFenceId: [
          { required: true, message: "请选择批次编号", trigger: "change" },
        ],
        hDesc: [{ required: true, message: "请输入检疫机构", trigger: "blur" }],
        hTime: [
          { required: true, message: "请选择检疫时间", trigger: "change" },
        ],
      },

      drawer: false,
      total: 0,
      searchParams: {
        // 栏舍管理
        fhName: "",
        // 是否可用
        hEnable: "",
        // 栏圈容量
        hMax: "",
        // 栏圈名称
        hName: "",
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      input: "",
      value: "",
      options: [
        {
          value: "可用",
          label: "可用",
        },
        {
          value: "禁用",
          label: "禁用",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url: "https://img2.baidu.com/it/u=673003775,1191479950&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          url: "",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          url: "",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          url: "",
        },
      ],
      multipleSelection: [],
    };
  },
  computed: {},
  methods: {
    // 讯问客户是否执行批量删除操作，是执行，否，提示用户，刷新页面
    toBatchDelete() {
      if (this.multipleSelection.length > 0) {
        this.$confirm("此操作将修改这些栏圈状态, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let idAndStatus = this.multipleSelection;
            let res = await changeStatusBatch(idAndStatus);
            console.log(res, "res");
            if (res.code == 200) {
              //提示用户
              this.$notify.success({
                title: "成功",
                message: res.message,
              });
              // 刷新数据
              this.init();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "请选择要删除的数据",
        });
      }
    },
    toCancel() {
      this.resetForm("ruleForm");
      this.drawer = false;
    },
    async findBatch() {
      let res = await get("/fenceHouse/queryAll");
      console.log(res);
      // res.data是批次数组
      this.batchData = res.data;
    },
    async findMax() {
      let res = await get("/hurdle/queryAllMax");
      console.log(res);
      // res.data是批次数组
      this.max = res.data;
    },

    // 确定按钮
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert("submit!");
          //获取用户的数据，发送给后台保存，刷新数据，提示用户保存成功，隐藏抽屉
          // this.ruleForm
          let res = await saveOrUpdate(this.ruleForm);
          console.log(res, "======保存成功");

          if (res.code == 200) {
            this.resetForm("ruleForm");
            // this.drawer = false;
            this.$notify.success({
              title: "成功",
              message: res.message,
            });

            this.toSearch();

            this.toCancel();
          } else {
            this.$notify.error({
              title: "错误",
              message: res.message,
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      // 重值图片显示
      this.$refs[formName].resetFields();
    },
    toAdd() {
      // 获取批次数据
      this.imageUrl = "";

      this.ruleForm = {
        hName: "",
        hMax: "",
        hEnable: "",
        hFenceId: "",
        hDesc: "",
        hTime: "",
      };
      this.findBatch();
      // 显示抽屉
      this.drawer = true;
    },
    handleClose(done) {
      // // this.$confirm('确认关闭？')
      // //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});

      this.resetForm("ruleForm");

      done();
    },
    toSearch() {
      this.pageParams.pageNum = 1;
      this.init();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return {
          hId: item.hId,
          hEnable: item.hEnable,
        };
      });
    },
    handleEdit(row) {
      this.ruleForm = {
        ...row,
      };

      this.drawer = true;
      console.log(row);
    },
    async handleDelete(row) {
      console.log(row.hEnable, row.hId);

      this.$confirm("此操作将修改这些栏圈状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await changeStatus(row.hEnable, row.hId);
          console.log(res, "res");
          if (res.code == 200) {
            //提示用户
            this.$notify.success({
              title: "成功",
              message: res.message,
            });
            // 刷新数据
            this.init();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async init() {
      let temp = {
        ...this.searchParams,
        ...this.pageParams,
      };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }

      let res = await findByPage(temp);
      console.log(res);

      console.log(res.data.list);
      console.log(res.data.total);

      this.tableData = res.data.list;
      this.total = res.data.total;
    },
  },
  watch: {
    pageParams: {
      handler() {
        console.log(this.pageParams);
        this.init();
      },
      deep: true,
    },
  },
  created() {
    this.findBatch();
    this.findMax();
    this.init();
  },
  mounted() {},
};
</script>
<style scoped>
.option-div {
  display: flex;
  justify-content: flex-end;
  padding-right: 5px;
}
.option-div > * {
  margin-left: 10px;
}

.div-page {
  /* display: flex;
  justify-content: flex-end; */
  text-align: right;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>