<template>
  <a-drawer width="85%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <div class="left-information">
      <div class="frie-info">
        <div class="info">
          <div style="display: flex; margin-bottom: 10px">
            <img src="../../../../assets/images/frie-img.png" alt="" />
            <h2>{{ formInfo.deptName }}</h2>
          </div>
          <div>父级单位：两江新区消防救援支队</div>
          <div>负责人：{{ formInfo.leader }}</div>
          <div>联系方式：{{ formInfo.phone }}</div>
          <div>组织职责：{{ formInfo.dutyDescription ? formInfo.dutyDescription : '无' }}</div>
        </div>
        <div class="address">地理信息</div>
        <div>{{ formInfo.address }}</div>
        <div class="map-box">
          <PlaceMap :formInfo="formInfo" />
        </div>
      </div>
      <div class="right-pop">
        <h4>关联人员</h4>
        <div style="display: flex" class="pop-list" v-if="list.length>0">
          <!-- 头像 -->
          <div v-for="(item, index) in list" :key="index" class="pop-num">
            <div class="pop-img"></div>
            <!-- 名字 -->
            <div class="name-text">{{ item.nickName }}</div>
          </div>
        </div>
        <div class="not-null" v-else></div>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { getDept, addDept, updateDept, getDeptInfo } from '@/api/system/dept'
import { listUser } from '@/api/system/user'
import PlaceMap from '@/components/Map/PlaceMap.vue'
export default {
  name: 'DepyInfo',
  dicts: ['dept_level'],
//   props: {
//     statusOptions: {
//       type: Array,
//       required: true,
//     },
//   },
  components: { PlaceMap },
  data () {
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        deptId: undefined,
        parentId: undefined,
        deptName: undefined,
        orderNum: 0,
        leader: undefined,
        phone: undefined,
        email: undefined,
        status: '0'
      },
      id: null,
      open: false,
      list: [],
      rules: {
        parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
        deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
        orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
        email: [
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        phone: [
          {
            pattern: /^((0\d{2,3}\d{7,8})|(0\d{2,3}-\d{7,8})|(1[3|4|5|6|7|8|9]\d{9}))$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      },
      formInfo: {}
    }
  },
  filters: {},
  created () {},
  computed: {},
  watch: {},
  methods: {
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        deptId: undefined,
        parentId: undefined,
        deptName: undefined,
        orderNum: 0,
        leader: undefined,
        phone: undefined,
        email: undefined,
        status: '0'
      }
    },
    /** 新增按钮操作 */
    handleAdd (row) {
      this.reset()
      if (row !== undefined) {
        this.form.parentId = row.deptId
      }
      this.open = true
      this.formTitle = '添加部门'
      this.$emit('select-tree')
    },
    /** 修改按钮操作 */
    handleView (row) {
      this.reset()
      this.id = row.deptId
      getDept(this.id).then((response) => {
        this.form = response.data
        this.open = true
        this.formTitle = '详情'
      })
      this.getUserInfo()
      this.getdepInfo()
      this.$emit('select-tree', row)
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (this.form.deptId !== undefined) {
            updateDept(this.form)
              .then((response) => {
                this.$message.success('修改成功', 3)
                this.open = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          } else {
            addDept(this.form)
              .then((response) => {
                this.$message.success('新增成功', 3)
                this.open = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          }
        } else {
          return false
        }
      })
    },
    // 详情
    getUserInfo () {
      const params = {
        pageNum: 1,
        pageSize: 100,
        deptId: this.id
      }
      listUser(params).then((res) => {
        this.list = res.rows
      })
    },
    // 机构详情
    getdepInfo () {
      getDeptInfo(this.id).then((res) => {
        this.formInfo = res.data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.left-information {
  display: flex;
  font-size: 14px;
  h2 {
    font-weight: bold;
    margin-top: 15px;
    margin-left: 10px;
  }
  .frie-info {
    width: 350px;
    height: 86vh;
    border-right: 1px solid #f0ecec;
    margin-right: 15px;
    padding: 0 10px;
    .address {
      border-top: 1px solid #f0ecec;
      padding: 5px 0;
      color: #5eb8f0;
    }
  }
  .info {
    line-height: 30px;
    img {
      width: 60px;
      height: 60px;
      display: inline-block;
    }
  }
  .right-pop {
    flex: 1;
    .pop-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .pop-num {
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    h4 {
      font-weight: bold;
      margin: 20px 0;
    }
    .pop-img {
      width: 42px;
      height: 42px;
      background: url('../../../../assets/images/pop-img.png') no-repeat;
      border-radius: 50%;
      background-size: 100% 100%;
    }
    .name-text {
      margin: 10px 0px 0 5px;
    }
  }
  .map-box{
        width: 100%;
        height: 400px;
        margin-top: 20px;
    }
    .not-null{
        width: 210px;
        height: 210px;
        background: url('../../../../assets/images/null.png') no-repeat;
        background-size: 100% 100%;
        margin: auto;
        margin-top: 260px;
    }
}
</style>
