// 值班名单
<template>
  <div class="app-container">
    <div class="container">
      <div class="personnel-main">
        <div class="personnel-main-item" style="width: 66%">
          <div class="personnel-top">
            <span>人员名单</span>
          </div>
          <div class="personnel-search">
            <el-form :inline="true" :model="page.data">
              <el-form-item class="margin-left">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="addOrUpdate('添加人员')"
                  >添加人员</el-button
                >
              </el-form-item>
              <el-form-item class="margin-left">
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  @click="download"
                  >下载模板</el-button
                >
              </el-form-item>
              <el-form-item class="margin-left">
                <el-button type="primary" plain @click="batchImport"
                  >批量导入白名单</el-button
                >
              </el-form-item>
              <el-form-item class="margin-left input">
                <el-input
                  clearable
                  v-model="page.data.name"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item class="margin-left input">
                <el-input
                  clearable
                  v-model="page.data.managePhone"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <el-form-item class="margin-left">
                <el-button
                  type="primary"
                  @click="fetchData"
                  icon="el-icon-search"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!-- 主体表格 -->
          <div class="personnel-content-box">
            <div class="personnel-content">
              <div
                v-for="item in tableData"
                :key="item.id"
                class="content-item"
              >
                {{ item.name }} 【{{ item.phone }}】
                <div class="content-item-icon">
                  <el-tooltip effect="dark" content="删除">
                    <i class="el-icon-delete-solid" style="color: #ff6161"></i>
                  </el-tooltip>
                  <el-tooltip effect="dark" content="编辑">
                    <i class="el-icon-edit"></i>
                  </el-tooltip>
                  <el-tooltip effect="dark" content="添加至值班领导">
                    <i class="el-icon-s-custom"><span>领导</span></i>
                  </el-tooltip>
                  <el-tooltip effect="dark" content="添加至值班民警">
                    <i class="el-icon-s-custom"><span>民警</span></i>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="personnel-main-item">
          <div class="personnel-top">
            <span>今日值班名单</span>
          </div>
          <div class="personnel-content2">
            <div class="item-layout">
              <div class="content2-title">值班领导</div>
              <div class="content2-main">
                <div
                  v-for="item in tableData"
                  :key="item.id"
                  class="content2-main-item"
                >
                  {{ item.name }} 【{{ item.phone }}】
                  <i
                    class="el-icon-error content2-main-item-icon"
                    @click="del(item.id)"
                  ></i>
                </div>
              </div>
            </div>
            <div class="item-layout">
              <div class="content2-title">值班民警</div>
              <div class="content2-main">
                <div
                  v-for="item in tableData"
                  :key="item.id"
                  class="content2-main-item"
                >
                  {{ item.name }} 【{{ item.phone }}】
                  <i class="el-icon-error content2-main-item-icon"></i>
                </div>
              </div>
            </div>
          </div>
          <!-- 确认 -->
          <div class="sure">
            <el-button type="primary" @click="submit">保存</el-button>
          </div>
        </div>
      </div>
      <!-- 添加/编辑 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="550px"
        :close-on-click-modal="false"
      >
        <el-form
          :model="addOrUpdateForm"
          :rules="rules"
          ref="formRef"
          label-position="left"
          label-width="120px"
        >
          <el-form-item label="人员姓名" prop="name">
            <el-input
              clearable
              placeholder="请输入人员姓名"
              v-model="addOrUpdateForm.name"
            />
          </el-form-item>
          <el-form-item label="人员手机号" prop="phone">
            <el-input
              clearable
              placeholder="请输入人员手机号"
              v-model="addOrUpdateForm.phone"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getwarningConfigUpdate,
  getwarningConfig,
  getCarViolationTerm,
  getCarYearCheckTerm,
} from "@/api/carWarning";
export default {
  data() {
    return {
      dialogTitle: "",
      dialogVisible: false, //新增编辑
      isEdit: false,
      // 页面
      page: {
        // 搜索表单
        data: {
          name: "",
          managePhone: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [
        { id: 1, name: "圆子", phone: "18245454545" },
        { id: 2, name: "圆子", phone: "18245454545" },
        { id: 3, name: "圆子", phone: "18245454545" },
        { id: 4, name: "圆子", phone: "18245454545" },
      ],
      // 添加订单参数
      addOrUpdateForm: {
        name: "",
        phone: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入人员姓名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入人员手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    // this.getInfo();
  },

  methods: {
    fetchData() {},
    async getInfo(type) {},

    // 添加编辑
    addOrUpdate(dialogTitle, edit) {
      this.dialogVisible = true;
      this.dialogTitle = dialogTitle;
      this.$nextTick(async () => {
        this.$refs.formRef.resetFields();
        if (edit) {
          // 修改
          this.addOrUpdateForm = JSON.parse(JSON.stringify(edit));
          this.isEdit = true;
        } else {
          // 添加
          this.isEdit = false;
        }
      });
    },
    submit() {
      this.$refs.formRef.validate(async (pass) => {
        if (!pass) {
          return false;
        }
        const res = {
          onSale: 0,
          id: this.isEdit ? this.addOrUpdateForm.id : undefined,
        };
        console.log(res);
        return;
        await doEditShop(res);
        await this.fetchData();
        this.$message.success(`${this.dialogTitle}成功`);
        this.dialogVisible = false;
      });
    },
    del(id) {
      // console.log(id,3);
    },
    download() {},
    batchImport() {},
  },
};
</script>

<style lang="scss" scoped>
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 160px;
}
.container {
  padding-left: 16px;
}
.personnel-main {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.personnel-main-item {
  width: 34%;
  height: 960px;
  border-radius: 12px;
  box-shadow: 0 0 5px rgba(153, 189, 243, 0.85);
  padding: 20px;
  // overflow-y: auto;
  margin-right: 20px;

  .personnel-top {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #333;
    margin-bottom: 10px;
  }
  .personnel-search {
    margin-bottom: 10px;
  }
  .personnel-content-box {
    height: 90%;
    overflow-y: auto;
    .personnel-content {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      & > div {
        margin-top: 10px;
        margin-left: 1%;
        min-width: 301px;
        // width: 32%;
        height: 48px;
        padding: 12px 60px;
        border-radius: 24px;
        background-color: #f5fafe;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
      }
      & > div:nth-of-type(3n + 1) {
        // margin-left: 0;
      }
      .content-item {
        position: relative;
        &:hover {
          cursor: pointer;
          // border: 2px solid rgba(211, 231, 255, 1);
          .content-item-icon {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 301px;
            height: 48px;
            padding: 12px 30px;
            position: absolute;
            top: 0px;
            right: 0px;
            color: #0f85ff;
            font-size: 27px;
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid rgba(211, 231, 255, 1);
            border-radius: 24px;
            visibility: visible;
            i {
              display: flex;
              align-items: center;
            }
            span {
              font-size: 16px;
              font-weight: 500;
            }
          }
        }
        .content-item-icon {
          // visibility: hidden;
          display: none;
        }
      }
    }
  }

  .personnel-content2 {
    padding: 6px 20px;
    height: 90%;
    overflow-y: auto;
    .item-layout {
      .content2-title {
        position: relative;
        font-weight: 500;
        font-size: 18px;
        line-height: 27px;
        &:before {
          position: absolute;
          top: 6px;
          left: -10px;
          width: 3px;
          height: 16px;
          content: "";
          background-color: #409eff;
          border-radius: 3px;
        }
      }
      .content2-main {
        display: flex;
        flex-wrap: wrap;
        & > div {
          margin-top: 10px;
          margin-left: 3%;
          min-width: 218px;
          width: 47%;
          height: 34px;
          padding: 5px 20px;
          border-radius: 4px;
          background-color: #f1f8ff;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #409eff;
        }
        .content2-main-item {
          position: relative;
          text-align: center;
          cursor: pointer;
          &:hover {
            .content2-main-item-icon {
              position: absolute;
              top: -7px;
              right: -5px;
              color: #606266;
              visibility: visible;
            }
          }
          .content2-main-item-icon {
            visibility: hidden;
            // display: none;
          }
        }
      }
    }
  }
}
//确认
.sure {
  text-align: center;
  margin-bottom: 37px;
}
</style>
