
<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="updateOrAdd('add')"
      class="margin-left"
      >添加区域</el-button
    >
    <el-select
      filterable
      clearable
      v-model="page.data.disinfectAreaId"
      placeholder="请选择巡查区域"
      class="margin-left input"
    >
      <el-option
        v-for="item in xiaosha_area"
        :key="item.disinfectAreaId"
        :label="item.disinfectAreaName"
        :value="item.disinfectAreaId"
      >
      </el-option>
    </el-select>
    <el-input
      v-model="page.data.disinfectAreaOnus"
      placeholder="请输入负责人姓名"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.disinfectAreaPhone"
      placeholder="请输入负责人手机号"
      class="margin-left input"
    ></el-input>
    <el-button
      type="primary"
      icon="el-icon-search"
      @click="fetchData"
      class="margin-left"
      >搜索</el-button
    >
    <div class="content flex">
      <div class="item" v-for="(item, index) in list" :key="index">
        <img
          class="area-del"
          src="../../../assets/area-del.png"
          alt=""
          @click="deleteArea(item.disinfectAreaId)"
        />
        <div @click="updateOrAdd('update', item)">
          <div class="tit">{{ item.disinfectAreaName }}</div>
          <div class="notice text-overflow">
            {{ item.disinfectAreaNotice }}
          </div>
          <div class="QRcode" @click="clickQRcode">
            <el-image
              class="qr-img"
              :src="item.disinfectQrcode"
              :preview-src-list="[item.disinfectQrcode]"
            >
            </el-image>
          </div>
          <div class="today">
            <span>每天{{ item.todayTotalDisinfectNum }}次巡查</span><br />
            <span
              >今日巡查：
              <i
                :class="
                  item.disinfectAreaTimeType == 1
                    ? 'blue icon1'
                    : item.disinfectAreaTimeType == 2
                    ? 'red icon1'
                    : 'icon1'
                "
                v-for="(item, index) in item.disinfectAreaTimeVOList"
                :key="index"
              ></i>
              {{ item.todayDisinfectNum }}/{{
                item.todayTotalDisinfectNum
              }}</span
            >
          </div>
          <div class="user text-overflow">
            负责人：{{ item.disinfectAreaOnus }} {{ item.disinfectAreaPhone
            }}<br />
            <img
              class="positioning"
              src="../../../assets/positioning.png"
              alt=""
            />
            {{ item.disinfectAreaAddress }}
          </div>
        </div>
      </div>
    </div>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--对话框-->
    <el-dialog
      @close="closeDialog"
      :title="dialogTitle[dialogType]"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="left"
      >
        <div>
          <div class="title">
            <div class="line"></div>
            <span>区域信息配置</span>
          </div>
          <div class="flex">
            <el-form-item
              label="区域名称"
              prop="disinfectAreaName"
              style="flex: 0.5"
            >
              <el-input
                maxlength="10"
                show-word-limit
                v-model="form.disinfectAreaName"
                placeholder="请输入区域名称"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="区域详细地址"
              prop="disinfectAreaAddress"
              style="flex: 0.5"
            >
              <el-input
                v-model="form.disinfectAreaAddress"
                placeholder="请输入区域详细地址"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item
            label="区域公告"
            prop="disinfectAreaNotice"
            style="flex: 0.5"
          >
            <el-input
              v-model="form.disinfectAreaNotice"
              placeholder="请输入区域公告"
            ></el-input>
          </el-form-item>
          <div class="flex">
            <el-form-item
              label="负责人姓名"
              prop="disinfectAreaOnus"
              style="flex: 0.5"
            >
              <el-input
                v-model="form.disinfectAreaOnus"
                placeholder="请输入区域负责人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="负责人手机号"
              prop="disinfectAreaPhone"
              style="flex: 0.5"
            >
              <el-input
                v-model="form.disinfectAreaPhone"
                placeholder="请输入区域负责人手机号"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div>
          <div class="title">
            <div class="line"></div>
            <span>巡查时段配置（每天）</span>
          </div>
          <div class="flex">
            <div
              class="time"
              v-for="(item, index) in disinfectAreaTimeDTOList"
              :key="index"
            >
              <el-time-select
                style="width: 150px"
                placeholder="选择起始时间"
                v-model="item.startTime"
                :picker-options="{
                  start: '00:00',
                  step: '00:10',
                  end: '23:59',
                }"
              >
              </el-time-select>
              —
              <el-time-select
                style="width: 150px"
                placeholder="选择结束时间"
                v-model="item.endTime"
                :picker-options="{
                  start: '00:00',
                  step: '00:10',
                  end: '23:59',
                  minTime: item.startTime,
                }"
              >
              </el-time-select>
              <i
                class="el-icon-circle-plus-outline time-add"
                @click="addTime"
                v-if="index === disinfectAreaTimeDTOList.length - 1"
              ></i>
              <i
                class="el-icon-delete-solid time-del"
                @click="delTime(index)"
                v-if="index != disinfectAreaTimeDTOList.length - 1"
              ></i>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="doUpdateOrAdd"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  disinfectAreaList,
  disinfectAreaGetList,
  disinfectAreaEdit,
  disinfectAreDelete,
} from "@/api/xiaosha";

export default {
  components: { Pagination },
  filters: {},
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          disinfectAreaId: null,
          disinfectAreaPhone: null,
          disinfectAreaOnus: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dialogVisible: false,
      xiaosha_area: [], //巡查区域
      // 对话框标题
      dialogTitle: {
        add: "添加区域",
        update: "编辑区域",
      },
      dialogType: "add",
      // 添加账号参数
      form: {
        disinfectAreaName: "",
        disinfectAreaAddress: "",
        disinfectAreaNotice: "",
        disinfectAreaOnus: null,
        disinfectAreaPhone: "",
      },
      form_copy: {},
      // 验证规则
      rules: {
        disinfectAreaName: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        disinfectAreaAddress: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        disinfectAreaNotice: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        disinfectAreaOnus: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        disinfectAreaPhone: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
      },
      // 时间段
      disinfectAreaTimeDTOList: [
        {
          startTime: null,
          endTime: null,
        },
      ],
    };
  },
  created() {
    this.fetchData();
    this.disinfectAreaGetList();
  },
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      disinfectAreaList(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 巡查区域
    disinfectAreaGetList() {
      disinfectAreaGetList().then((res) => {
        this.xiaosha_area = res.data;
      });
    },
    addTime() {
      this.disinfectAreaTimeDTOList.push({
        startTime: null,
        endTime: null,
      });
    },
    delTime(index) {
      this.disinfectAreaTimeDTOList.splice(index, 1);
    },
    closeDialog() {
      this.disinfectAreaTimeDTOList = [
        {
          startTime: null,
          endTime: null,
        },
      ];
    },
    clickQRcode(event) {
      event.stopPropagation();
    },
    // 打开编辑
    updateOrAdd(type, row) {
      if (type === "add") {
        this.form = JSON.parse(JSON.stringify(this.form_copy));
      } else {
        this.form = JSON.parse(JSON.stringify(row));
        this.disinfectAreaTimeDTOList = row.disinfectAreaTimeVOList;
      }
      this.dialogType = type;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 确定新增/编辑
    doUpdateOrAdd() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.disinfectAreaTimeDTOList = this.disinfectAreaTimeDTOList;
          let isOk = this.completeFilling(this.form.disinfectAreaTimeDTOList);
          if (isOk) {
            disinfectAreaEdit(this.form).then((res) => {
              this.dialogVisible = false;
              this.fetchData();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            });
          } else {
            this.$message.error("巡查时段不能为空");
          }
        }
      });
    },
    completeFilling(list) {
      let isOk = true;
      list.forEach((item) => {
        if (!item.endTime || !item.startTime) {
          isOk = false;
        }
      });
      return isOk;
    },
    // 删除账号
    deleteArea(id) {
      this.$confirm(
        "确定要删除此区域吗？删除后，人员将自动与此区域解绑。",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      ).then(() => {
        disinfectAreDelete({ disinfectAreaId: id }).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>

<style scope lang="scss">
.app-container {
  min-width: 800px;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.margin-left {
  margin: 10px 0 0 10px;
}

.input {
  width: 200px;
}
.content > .item {
  width: 386px;
  min-height: 252px;
  border: 1px solid #e3e9f8;
  border-radius: 10px;
  position: relative;
  padding: 20px 18px 12px;
  margin: 28px 28px 28px 0;
}
.area-del {
  width: 80px;
  height: 42px;
  position: absolute;
  top: -5px;
  right: -5px;
}
.tit {
  font-size: 20px;
  color: #333333;
}
.notice {
  font-size: 14px;
  color: #606266;
  margin: 20px 0 12px;
}
.today {
  width: 280px;
  background: rgba(227, 235, 255, 0.34);
  border-radius: 6px;
  color: #6690f2;
  margin-right: 13px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}
.icon1 {
  width: 5px;
  height: 12px;
  background: #ccdbfd;
  border-radius: 3px;
  display: inline-block;
  margin-right: 4px;
}
.blue {
  background: #6690f2 !important;
}
.red {
  background: #e98383 !important;
}
.QRcode {
  width: 60px;
  height: 60px;
  background: rgba(227, 235, 255, 0.34);
  border-radius: 6px;
  float: right;
}
.user {
  font-size: 13px;
  color: #b9becb;
  line-height: 22px;
}
.positioning {
  width: 11px;
  height: 13px;
  vertical-align: middle;
}
.title {
  margin-bottom: 25px;
  .line {
    width: 4px;
    height: 14px;
    background: #409eff;
    border-radius: 13px;
    display: inline-block;
    margin-right: 8px;
  }
  span {
    // font-weight: 700;
    font-size: 16px;
    color: #606266;
  }
}
.time {
  flex: 50%;
  margin-bottom: 24px;
}
.time-del {
  color: #d9d9d9;
  font-size: 20px;
  margin-left: 10px;
}
.time-add {
  color: #409eff;
  font-size: 20px;
  margin-left: 10px;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qr-img {
  width: 50px;
  height: 50px;
  margin: 5px;
}
</style>
