<style lang="scss">
.staff {
  display: flex;
  justify-content: space-between;
  .companies {
    height: 75vh;
    overflow: auto;
    margin-right: 10px;
    overflow-x: hidden;
  }
  & > li {
    width: 30%;
    list-style: none;
    min-height: 70vh;
    background: #fff;
    border: 1px solid #d9d9d9;
    padding: 20px 10px;
  }
  .custom-tree-node {
    width: 100%;
    .el-tree-node__content {
      height: 32px;
    }
    .label_name {
      font-size: 14px;
    }
    .active {
      color: #1989fa;
    }
    .edit {
      float: right;
      i {
        font-weight: bolder;
        font-size: 14px;
      }
    }
  }
  .staff_list {
    width: 68%;
    .grid_item {
      height: 60vh;
      border: 1px solid #ccc;
      text-align: center;
      .el-input--mini {
        width: 90%;
        margin-top: 10px;
        padding-right: 5px;
      }
      .el-button--primary {
        width: 90%;
        margin-top: 20px;
      }
    }
  }
}
.staffs {
  margin-right: 10px;
}
// 企业端
.qy_content {
  background: #151932;
  width: 100%;
  height: 90vh;
  margin-top: 10px;
  .grid-item {
    padding: 20px;
    color: #fff;
  }
  .intro {
    height: 90vh;
    overflow-y: scroll;
    line-height: 25px;
  }
}
.w-e-text-container {
  height: 600px;
}
.bg-color-blue {
  color: #fff;
  background-color: #388cff;
}
.org-tree-container {
  background: none;
}
.gridDetail {
  .el-dialog__header{
    background: #2D3A67;
    .el-dialog__title{
      color:#fff;
    }
  }
  .el-dialog__body{
    background: #2D3A67;
    padding:10px 20px;
    table{
      td{
        padding:10px;
        color:#fff;
        text-align: center;
        img{
          border-radius: 3px;
        }
        h4{
          color:#30CEEE;
        }
      }
    }
  }
  .el-dialog__footer{
    background: #2D3A67;
  }
}
</style>
<template>
  <section>
    <p>公司管理 > 网格化管理</p>
    <!-- 管理员端 -->
    <div v-if="utype == 0">
      <div class="content">
        <ul class="staff">
          <li class="companies">
            <el-form size="small">
              <el-form-item>
                <el-input
                  suffix-icon="el-icon-search"
                  v-model="name"
                  @change="getData"
                  placeholder="公司名称"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-tree
              :data="data"
              node-key="id"
              :props="props"
              :expand-on-click-node="false"
            >
              <span
                class="custom-tree-node"
                slot-scope="{ node, data }"
                @click="change(data)"
              >
                <span v-if="id == data.id" class="label_name active">{{
                  node.label
                }}</span>
                <span v-else class="label_name">{{ node.label }}</span>
              </span>
            </el-tree>
          </li>
          <li class="staff_list">
            <el-form
              label-width="70px"
              :inline="true"
              size="small"
              label-position="left"
            >
              <el-form-item>
                <el-button
                  icon="el-icon-plus"
                  @click="getEnterpriseInfo"
                  type="primary"
                  size="mini"
                  >安全生产网格化管理简介</el-button
                >
              </el-form-item>
            </el-form>
            <div>
              <el-row :gutter="20">
                <el-col :span="4" v-for="item in gridList" :key="item.id">
                  <div class="grid_item">
                    <div style="position: relative">
                      <el-input
                        v-model="item.name"
                        placeholder="请输入"
                        size="mini"
                      >
                        <el-button
                          slot="append"
                          icon="el-icon-edit"
                          size="mini"
                          @click="editGridDetail(item)"
                        ></el-button>
                      </el-input>
                      <i
                        class="el-icon-arrow-right"
                        style="
                          position: absolute;
                          top: 15px;
                          right: 1px;
                          cursor: pointer;
                        "
                      ></i>
                    </div>
                    <el-button type="primary" size="mini">添加</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </li>
        </ul>
      </div>
      <el-dialog
        :title="'编辑' + curItem.name"
        :visible.sync="dialogFormVisible1"
        width="1000px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form size="small" label-width="120px">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="负责人姓名">
                <el-input
                  v-model="form1.charge_person_name"
                  placeholder="请输入负责人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人电话">
                <el-input
                  v-model="form1.charge_person_phone"
                  placeholder="请输入负责人手机号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号">
                <el-input
                  v-model="form1.car_number"
                  placeholder="仅配送相关职位填写"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人照片">
                <div class="upload_div">
                  <i
                    v-if="form1.charge_person_photo"
                    @click="form1.charge_person_photo = ''"
                    class="el-icon-delete"
                  ></i>
                  <i class="el-icon-upload"></i>
                  <img
                    v-if="form1.charge_person_photo"
                    width="100%"
                    height="100%"
                    :src="form1.charge_person_photo"
                    alt=""
                  />
                  <input
                    accept="image/png,image/jpg"
                    @change="upload('charge_person_photo')"
                    id="charge_person_photo"
                    type="file"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件类型">
                <div class="upload_div">
                  <i
                    v-if="form1.certificate"
                    @click="form1.certificate = ''"
                    class="el-icon-delete"
                  ></i>
                  <i class="el-icon-upload"></i>
                  <img
                    v-if="form1.certificate"
                    width="100%"
                    height="100%"
                    :src="form1.certificate"
                    alt=""
                  />
                  <input
                    accept="image/png,image/jpg"
                    @change="upload('certificate')"
                    id="certificate"
                    type="file"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="责任清单">
            <el-input
              type="textarea"
              v-model="form1.duty_list"
              placeholder=""
              rows="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="履职清单">
            <el-input
              type="textarea"
              v-model="form1.job_list"
              placeholder=""
              rows="10"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible1 = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="saveGridDetail"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        title="安全生产网格化管理简介"
        :visible.sync="dialogFormVisible2"
      >
        <div>
          <fuEditor v-model="form.grid_security" :isClear="isClear"></fuEditor>
        </div>
        <div slot="footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="updateEnterprise">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 企业端 -->
    <div class="qy_content" v-else>
      <el-row :gutter="10">
        <el-col :span="12">
          <div
            class="grid-item intro"
            v-html="enterpriseInfo.grid_security"
          ></div>
        </el-col>
        <el-col :span="12">
          <div class="grid-item grid_chart">
            <h2 align="center" style="margin-bottom: 10vh">
              安全生产管理"一网通"
            </h2>
            <vue2-org-tree
              :data="treeData"
              :label-class-name="labelClassName"
              @on-node-click="nodeClick"
            />
          </div>
        </el-col>
      </el-row>
      <el-dialog
        title="责任详情"
        :visible.sync="dialogFormVisible3"
        width="600px"
        class="gridDetail"
      >
        <div>
          <table width="100%" border=1 cellspacing=0 cellpadding=0>
            <tr>
              <td style="text-align:left;padding-left:10px;">
                <p>姓名：</p>
                <p>李达康</p>
              </td>
              <td rowspan="2">
                <img src="http://www.baianxi.com/images/test.jpg" width="80" alt="">
              </td>
              <td rowspan="2">
                <img src="http://www.baianxi.com/images/zj.jpg" width="180" alt="">
              </td>
            </tr>
            <tr>
              <td style="text-align:left;padding-left:10px;">
                <p>手机：</p>
                <p>15982456282</p>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <h4 align="left" style="">责任清单</h4>
                <div style="height:200px;">

                </div>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <h4 align="left" style="">履职清单</h4>
                <div style="height:200px;">

                </div>
              </td>
            </tr>
            <tr></tr>
          </table>
        </div>
        <div slot="footer">
          <el-button @click="dialogFormVisible3 = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible3 = false" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </section>
</template>
<script>
import Page from "../../components/Page";
import fuEditor from "@/components/fuEditor/index.vue";
export default {
  components: {
    Page,
    fuEditor,
  },
  data() {
    return {
      isClear: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      data: [],
      form: { page: 1, page_size: 20 },
      list: [],
      total: 1,
      loading: false,
      props: {
        label: "name",
      },
      id: "",
      dpt: { enterprise_name: "", enterprise_id: "", staffusers: [] },
      enterprise_name: "",
      name: "",
      staff: {},
      dptList: [],
      form1: {},
      gridList: [],
      utype: localStorage.getItem('utype',0),
      treeData1: {
        value: 0,
        label: "公司主要负责人",
        children: [
          {
            value: 2,
            label: "安全科",
            children: [
              {
                value: 5,
                label: "仓库运行班",
                children: [
                  {
                    value: 7,
                    label: "储存员",
                  },
                  {
                    value: 11,
                    label: "搬运员",
                  },
                  {
                    value: 12,
                    label: "守护员",
                  },
                ],
              },
              {
                value: 6,
                label: "销售科",
                children: [
                  {
                    value: 12,
                    label: "甲销售员",
                  },
                  {
                    value: 12,
                    label: "乙销售员",
                  },
                ],
              },
              {
                value: 9,
                label: "配送队",
                children: [
                  {
                    value: 12,
                    label: "甲配送员",
                  },
                  {
                    value: 12,
                    label: "乙配送员",
                  },
                ],
              },
            ],
          },
        ],
      },
      enterpriseInfo: {},
      labelClassName: "bg-color-blue",
      curItem: {},
      treeData: {},
      gridDetail:{}
    };
  },
  methods: {
    getEnterpriseInfo() {
      this.$api.getEnterprise({ id: this.form.enterprise_id }).then((res) => {
        this.dialogFormVisible2 = true;
        this.form.grid_security = res.data.data.grid_security;
        this.enterpriseInfo = res.data.data;
      });
    },
    updateEnterprise() {
      let params = {
        id: this.form.enterprise_id,
        grid_security: this.form.grid_security,
        name: this.form.enterprise_name,
      };
      this.$api.updateEnterprise(params).then((res) => {
        this.dialogFormVisible2 = false;
      });
    },
    gopage(size) {
      if (size) {
        this.form.page_size = size;
      }
      this.form.page = this.$refs.pageButton.page;
      this.getData();
    },
    change(data) {
      this.id = data.id;
      this.enterprise_name = data.name;
      this.getDpt();
      this.$api.getDepartmentList({ enterprise_id: data.id }).then((res) => {
        this.dptList = res.data.data.list;
      });
      this.form.enterprise_id = data.id;
      this.form.enterprise_name = data.name;
      this.$api.getEnterprise({ id: this.form.enterprise_id }).then((res) => {
        this.form.grid_security = res.data.data.grid_security;
        this.enterpriseInfo = res.data.data;
      });
      // 机构树
      this.$api.getGridTree({ enterprise_id: this.id }).then((res) => {
        this.treeData = res.data.data;
        this.gridList = res.data.data;
      });
    },
    getData() {
      this.loading = true;
      this.$api.getEnterpriseList({ name: this.name }).then((res) => {
        this.data = res.data.data.list;
        this.change(this.data[0]);
      });
    },
    //获取员工列表
    getDpt() {
      var parm = this.form;
      parm.enterprise_id = this.id;
      this.$api.getStaffuserList(parm).then((res) => {
        this.loading = false;
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    del(id) {
      this.$confirm("确定删除吗", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.deleteStaffuser({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getDpt();
        });
      });
    },
    saveGridDetail() {
      let params = this.form1;
      params.enterprise_grid_id = this.curItem.id;
      if (params.id) {
        this.$api.updateGridDetail(params).then((res) => {
          if (res.data.code != 0) {
            this.$message.error(res.data.message);
          }
          this.dialogFormVisible1 = false;
        });
      } else {
        this.$api.addGridDetail(params).then((res) => {
          if (res.data.code != 0) {
            this.$message.error(res.data.message);
          }
          this.dialogFormVisible1 = false;
        });
      }
    },
    handleClose(index) {
      this.dpt.staffusers.splice(index, 1);
    },
    edit(data) {
      this.dialogFormVisible1 = true;
      this.staff = { ...data };
    },
    editGridDetail(item) {
      if (!item.name) {
        this.$message.error("请先填写名称再编辑!");
        return;
      }
      this.dialogFormVisible1 = true;
      this.curItem = item;
      this.$api.getGridDetail({ id: item.id }).then((res) => {
        this.form1 = res.data.data;
      });
    },
    upload(type) {
      var file = document.getElementById(type).files;
      var data = new FormData();
      data.append("file", file[0]);
      this.$api.uploadFile(data).then((res) => {
        if (res.data.code == 0) {
          let form = this.form1;
          this.$set(form, type, res.data.data.url);
          this.$message({ message: "上传成功！", type: "success" });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    nodeClick(e,data){
      this.$api.getGridDetail({ id: data.value }).then((res) => {
        this.form1 = res.data.data;
        this.dialogFormVisible3 = true;
      });
    }
  },
  created() {
    this.getData();
  },
};
</script>