<template>
  <div class="app-container">
    <UploadModal
      ref="uploadModal"
      :account_list="account_list"
      @finish="modalSuccess(false)"
    />
    <!--操作区-->
    <el-button
      type="primary"
      icon="el-icon-plus"
      class="margin-bottom"
      @click="create('添加岗位区域备案')"
    >添加岗位区域备案</el-button>
    <el-button
      type="primary"
      icon="el-icon-download"
      class="margin-left"
      @click="download"
    >下载模板</el-button>
    <el-button
      class="margin-left"
      type="primary"
      plain
      icon="el-icon-upload2"
      @click="handleUpload"
    >批量导入岗位区域备案</el-button>
    <!--搜索区-->
    <div class="float">
      <el-select
        v-model="page.data.adminId"
        filterable
        clearable
        placeholder="请选择单位简称"
        class="margin-left input"
      >
        <el-option
          v-for="item in account_list"
          :key="item.adminId"
          :label="item.unitConciseName"
          :value="item.adminId"
        />
      </el-select>
      <!-- <el-input
        v-model="page.data.eeeee"
        placeholder="请输入单位简称"
        clearable
        class="margin-left input"
      ></el-input> -->
      <el-input
        v-model="page.data.postName"
        placeholder="请输入岗位名称"
        clearable
        class="margin-left input"
      />
      <el-select
        v-model="page.data.areaId"
        filterable
        clearable
        placeholder="请选择通行区域"
        class="margin-left input"
      >
        <el-option
          v-for="item in area_list"
          :key="item.passAreaId"
          :label="item.areaName"
          :value="item.passAreaId"
        />
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        class="margin-left"
        @click="fetchData"
      >搜索</el-button>
    </div>
    <!--主表格-->
    <el-table
      ref="table_form"
      v-loading="listLoading"
      class="table"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="所属单位" align="center">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="单位简称" align="center">
        <template slot-scope="scope">
          {{ scope.row.unitConciseName }}
        </template>
      </el-table-column>
      <el-table-column label="所属部门" align="center">
        <template slot-scope="scope">
          {{ scope.row.deptName }}
        </template>
      </el-table-column>
      <el-table-column label="岗位名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.postName }}
        </template>
      </el-table-column>
      <el-table-column label="备案通行区域" align="center" width="170">
        <template slot-scope="scope">
          <div
            v-if="scope.row.areaNameList && scope.row.areaNameList.length > 2"
          >
            <div
              v-for="(item, index) in scope.row.areaNameList"
              :key="index"
              class="d-i-b"
            >
              <el-tooltip
                class="item"
                effect="dark"
                placement="top-start"
                popper-class="tool-tip"
              >
                <span
                  slot="content"
                >
                  {{ (scope.row.areaNameList||[]).join('，') }}
                </span>
                <el-tag v-if="index < 2" effect="plain"> {{ item }}</el-tag>
                <el-tag v-if="index === 2" effect="plain"> ...</el-tag>
              </el-tooltip>
            </div>
          </div>
          <el-tag
            v-for="(item, index) in scope.row.areaNameList"
            v-else
            :key="index"
            effect="plain"
          >
            {{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="申请理由" align="center">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            placement="top-start"
            popper-class="tool-tip"
          >
            <div slot="content">
              {{ scope.row.reason }}
            </div>
            <span>{{ scope.row.reason | omissionCharacter }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="备案状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="info">审核中</el-tag>
          <el-tag v-if="scope.row.status === 3" type="success">已备案</el-tag>
          <el-tag v-if="scope.row.status === 2" type="warning">整改中</el-tag>
          <el-tag v-if="scope.row.status === 4" type="danger">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" width="250">
        <template slot-scope="scope">
          <!-- passWay:1-直接通过 2-审核 -->
          <el-button
            type="primary"
            size="small"
            :disabled="scope.row.passWay == 1"
            @click="detailFun(scope.row)"
          >审核详情</el-button>
          <el-button
            v-if="role == 2"
            type="danger"
            size="small"
            @click="deleteFun(scope.row.deptPostId)"
          >删除</el-button>
          <el-button
            v-if="scope.row.status === 2"
            type="warning"
            size="small"
            @click="create('整改', scope.row)"
          >整改</el-button>
          <el-button
            v-if="scope.row.status === 3"
            type="warning"
            size="small"
            @click="create('变更', scope.row)"
          >变更</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--对话框-->
    <el-dialog
      :title="dialogTit"
      :visible.sync="dialogVisible"
      width="700px"
      :close-on-click-modal="false"
    >
      <div style="max-height: 500px;overflow: auto;padding: 0 10px">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
          label-position="left"
        >
          <el-form-item
            v-if="role == 2"
            label="所属单位"
            class="form-item-style"
            prop="adminId"
          >
            <el-select
              v-model="form.adminId"
              filterable
              clearable
              placeholder="请选择单位"
              style="width: 100%"
              @change="adminIdChange"
            >
              <el-option
                v-for="item in account_list"
                :key="item.adminId"
                :label="item.username"
                :value="item.adminId"
              />
            </el-select>
          </el-form-item>
          <div
            v-for="(item, index) in form.detailDtoList"
            :key="index"
            :class="['整改', '变更'].indexOf(dialogTit) > -1?'':'custom-css'"
          >
            <div class="flex">
              <el-form-item
                label="岗位名称"
                class="form-item-style"
                :style="['整改', '变更'].indexOf(dialogTit) > -1?'flex:1':'flex:.9'"
                :prop="`detailDtoList.${index}.postName`"
                :rules="rules.postName"
              >
                <el-input v-model.trim="item.postName" placeholder="岗位名称" />
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item
                v-if="dialogTit != '变更'"
                label="绑定部门"
                :style="['整改', '变更'].indexOf(dialogTit) > -1?'flex:1':'flex:.9'"
                class="form-item-style"
                :prop="`detailDtoList.${index}.link`"
                :rules="rules.deptId"
              >
                <el-cascader
                  v-model="item.link"
                  style="width:100%"
                  :options="department_list"
                  :props="defaultParams"
                  clearable
                />
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item
                label="通行区域"
                :style="['整改', '变更'].indexOf(dialogTit) > -1?'flex:1':'flex:.9'"
                class="form-item-style"
                :prop="`detailDtoList.${index}.areaIdList`"
                :rules="rules.areaIdList"
              >
                <el-select
                  v-model="item.areaIdList"
                  filterable
                  clearable
                  multiple
                  placeholder="岗位的通行区域"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in area_list"
                    :key="item.passAreaId"
                    :label="item.areaName"
                    :value="item.passAreaId"
                  />
                </el-select>
              </el-form-item>
              <div v-if="dialogTit != '整改' && dialogTit != '变更'" class="icon" style="flex:.1">
                <i
                  v-if="form.detailDtoList.length > 1"
                  class="el-icon-close"
                  style="color:#F56C6C"
                  @click="delField(index)"
                />
                <i class="el-icon-circle-plus" style="color:#409EFF" @click="addField(index)" />
              </div>
            </div>
          </div>
          <el-form-item label="申请理由" class="form-item-style" prop="reason">
            <el-input
              v-model="form.reason"
              type="textarea"
              :rows="2"
              placeholder="请输入申请理由"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
    <!--详情对话框-->
    <el-dialog
      title="岗位区域备案审核详情"
      :visible.sync="detailDialogVisible"
      width="900px"
    >
      <div style="height: 500px;overflow: auto;padding: 0 10px">
        <div v-for="(cItem, cIndex) in checkList" :key="`check_${cIndex}`" style="margin-bottom: 10px">
          <div class="basic-desc-content">
            <div style="width: 200px">岗位：{{ cItem.postName }}</div>
            <div style="width: calc(100% - 300px)" class="area-desc-box">通行区域：
              <div
                v-for="(item, index) in cItem.areaNameList"
                :key="index"
                class="area-desc-box-item"
              >
                {{ item }}
              </div>
            </div>
            <div style="width: 100px;text-align: right">{{ (cItem.applyType||0 - 1)>=0 ? ['岗位申请','岗位变更'][cItem.applyType - 1] :'' }}</div>
            <div style="width: 200px">部门：{{ cItem.deptName }}</div>
            <div style="width: calc(100% - 200px)">申请理由：{{ cItem.reason }}</div>
          </div>
          <ul class="timeline-wrapper">
            <li class="timeline-wrapper-item">
              <div class="out-circle">
                <div class="in-circle" />
              </div>
              <div class="timeline-content">
                <div class="timeline-content_box">
                  <div class="audit-item-msg">
                    <span class="tit">发起岗位区域备案申请</span>
                    <span class="time">{{ cItem.createTime }}</span><br>
                    <template>
                      <strong class="tit">账号名称：</strong>{{ cItem.username }}<br>
                      <strong class="tit">单位简称：</strong>{{ cItem.unitConciseName }}
                    </template>
                  </div>
                </div>
              </div>
            </li>
            <li v-for="item in cItem.deptPostStreamVoList" :key="item.id" class="timeline-wrapper-item">
              <!--              ,(item.status||0 - 1)>=0?['gray-circle', 'yellow-circle', '','red-circle'][item.status - 1] :''-->
              <div :class="['out-circle',(item.status||0 - 1)>=0?['gray-circle', 'yellow-circle', '','red-circle'][item.status - 1] :'']">
                <div class="in-circle" />
              </div>
              <div class="timeline-content">
                <div class="timeline-content_box">
                  <div class="audit-item-msg">
                    <span class="tit">{{ item.auditName }} </span>
                    <span class="time">{{ item.checkTime }}</span><br>
                    <div class="audit-item-msg-content">
                      <div
                        v-if="item.checkName"
                        style="width: 200px"
                      >
                        <el-image
                          style="
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                        vertical-align: middle;
                      "
                          :src="item.checkAvatar"
                          :preview-src-list="[item.checkAvatar]"
                        />
                        {{ item.checkName }}
                      </div>
                      <span
                        style="width: 70px"
                        :class="[
                          'tit',
                          (item.status||0 - 1)>=0?['gray', 'yellow', 'blue','red'][item.status - 1] :'',
                        ]"
                      >{{
                        (item.status||0 - 1)>=0?['待审核', '整改中', '已同意','已拒绝'][item.status - 1] :''
                      }}</span>
                      <div class="customFields-box">
                        <div
                          v-for="(item1, index1) in item.content"
                          :key="index1"
                          class="customFields-box-item"
                          :class="
                            (item.status||0 - 1)>=0?['gray', 'yellow', 'blue','red'][item.status - 1] :''
                          "
                        >
                          {{ item1.customName }}：{{ item1.customNameVal }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>

        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialogVisible = false">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  deptPostDelete,
  deptPostEdit,
  passAreaAreaList,
  getRecursionGetPageList,
  getPostRecursionList,
  belowList,
  checkList,
  deptPostUpdate, deptPostChange
} from '@/api/user_manage'
import UploadModal from './components/UploadModal.vue'
export default {
  components: { Pagination, UploadModal },
  filters: {
    omissionCharacter(str) {
      if (str && str.length >= 15) {
        str = str.slice(0, 15) + '...'
      }
      return str
    }
  },
  data() {
    return {
      role: this.$store.getters.role,
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          postName: null,
          areaId: null,
          adminId: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 是否显示对话框
      dialogVisible: false,
      detailDialogVisible: false,
      dialogTit: '',
      form_copy: null,
      // 添加角色参数
      form: {
        adminId: null,
        detailDtoList: [
          {
            postName: null,
            link: null,
            areaIdList: null
          }
        ],
        reason: null
      },
      // 验证规则
      rules: {
        link: [{ required: true, message: '请选择', trigger: 'change' }],
        adminId: [{ required: true, message: '请选择', trigger: 'change' }],
        areaIdList: [{ required: true, message: '请选择', trigger: 'change' }],
        postName: [{ required: true, message: '请输入', trigger: 'change' }],
        reason: [{ required: true, message: '请输入', trigger: 'change' }]
      },
      account_list: [],
      area_list: [],
      department_list: [],
      defaultParams: {
        checkStrictly: true,
        label: 'deptName',
        value: 'departmentId',
        children: 'deptRsList',
        multiple: false
      },
      detailInfo: {},
      checkList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.fetchData()
    this.passAreaAreaList()
    if (this.role == 3 || this.role == 4) {
      this.getPostRecursionList()
    } else {
      this.belowList()
    }
    this.form_copy = JSON.parse(JSON.stringify(this.form))
  },
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true
      getRecursionGetPageList(this.page).then((res) => {
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      })
    },
    // 打开添加角色对话框
    create(type, row) {
      if (['整改', '变更'].indexOf(type) > -1) {
        this.form = Object.assign(this.form, row)
        this.form.detailDtoList = [
          {
            postName: null,
            link: null,
            areaIdList: null
          }
        ]
        this.form.detailDtoList[0].postName = row.postName
        this.form.detailDtoList[0].link = row.link.map(Number)
        this.form.detailDtoList[0].areaIdList = row.areaIdList
        console.log(this.form)
      } else {
        this.form = JSON.parse(JSON.stringify(this.form_copy))
      }
      this.dialogTit = type
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    // 添加字段
    addField(index, type) {
      this.form.detailDtoList.splice(index + 1, 0, {
        postName: null,
        link: null,
        areaIdList: null
      })
    },
    // 删除字段
    delField(index, type) {
      this.form.detailDtoList.splice(index, 1)
    },
    // 确定添加/编辑
    addOrUpdate() {
      this.$refs['form'].validate(async(valid) => {
        console.log(valid)
        if (valid) {
          let res
          if (this.dialogTit == '整改') {
            const data = {
              deptPostId: this.form.deptPostId,
              areaIdList: this.form.detailDtoList[0].areaIdList,
              link: this.form.detailDtoList[0].link,
              postName: this.form.detailDtoList[0].postName,
              reason: this.form.reason
            }
            res = await deptPostUpdate(data)
          } else if (this.dialogTit == '变更') {
            const data = {
              deptPostId: this.form.deptPostId,
              areaIdList: this.form.detailDtoList[0].areaIdList,
              postName: this.form.detailDtoList[0].postName,
              reason: this.form.reason
            }
            res = await deptPostChange(data)
          } else {
            this.form.detailDtoList.forEach((item) => {
              console.log(item.link)
              item.deptId = (item.link || []).length > 0 ? item.link[item.link.length - 1] : null
            })
            res = await deptPostEdit(this.form)
          }
          if (res.code == 200) {
            this.dialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }
        }
      })
    },
    // 删除角色
    deleteFun(id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deptPostDelete(id).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    },
    // 获取审核详情
    async detailFun(row, type) {
      console.log(row)
      await checkList(row.deptPostId).then((res) => {
        this.checkList = res.data
        this.detailInfo = row
        console.log(this.checkList, this.detailInfo)
      })
      if (!type) {
        this.detailDialogVisible = true
      }
    },
    // 切换单位
    adminIdChange(e) {
      if (e) {
        this.getPostRecursionList(e)
      }
    },
    // 获取部门
    getPostRecursionList(e) {
      getPostRecursionList(e).then((res) => {
        this.department_list = res.data
        this.department_list.forEach((item) => {})
      })
    },
    // 获取通行区域
    passAreaAreaList() {
      passAreaAreaList().then((res) => {
        this.area_list = res.data
      })
    },
    // 获取所属单位
    belowList() {
      belowList().then((res) => {
        this.account_list = res.data
      })
    },
    // 下载模板
    download() {
      window.location.href =
        process.env.VUE_APP_BASE_API + '/excel/post.xlsx'
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams()
      }
      this.fetchData()
    },
    clearPageParams() {
      this.page.current = 1
      this.page.pageSize = 10
    },
    handleUpload() {
      this.$refs.uploadModal.open()
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1
    }
  }
}
</script>
<style scoped lang="scss">
.basic-desc-content {
  border-radius: 8px;
  background: #3E9DFF;
  color: #fff;
  font-size: 15px;
  padding: 10px 20px;
  line-height: 36px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .area-desc-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    &-item {
      border: 1px solid #B3D9FF;
      height: 28px;
      line-height: 28px;
      padding: 0 5px;
      border-radius: 4px;
      margin-right: 5px;
      &:last-child{
        margin-right: 0;
      }
    }
  }
}
.audit-item-msg {
  position: relative;
  .tit {
    font-size: 15px;
    line-height: 28px;
  }
  .time {
    position: absolute;
    left: 300px;
    font-size: 14px;
    line-height: 28px;
    float: right;
  }
  &-content {
    display: flex;
    .customFields-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      left: 300px;
      &-item {
        line-height: 20px;
      }
    }
  }
}
.timeline-wrapper {
  list-style: none;
  margin: 0;
  margin-top: 20px;
  padding: 0;

  &-item {
    position: relative;
    margin-left: 16px;
    border-left: 1.6px solid #ededed;
    &:last-child {
      border-left: 1.6px solid transparent !important;
    }
    &:first-child {
      border-left: 1.6px dashed #409eff !important;
    }
    /*&:not(:first-child) {
      .out-circle {
        background: rgba(153, 153, 153, 0.1) !important;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1) !important;
        .in-circle {
          background: rgba(153, 153, 153, 1) !important;
          box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1) !important;
        }
      }

      //.timeline-content {
      //  &_box {
      //    //border: 2px solid #ededed !important;
      //    &:before {
      //      border-color: transparent #ededed transparent transparent !important;
      //    }
      //  }
      //}
    }*/

    .gray-circle {
      background: rgba(153, 153, 153, 0.1) !important;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1) !important;
      .in-circle {
        background: rgba(153, 153, 153, 1) !important;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1) !important;
      }
    }

    .yellow-circle {
      background: rgba(252, 186, 57, 0.1) !important;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1) !important;
      .in-circle {
        background: rgba(252, 186, 57, 1) !important;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1) !important;
      }
    }

    .red-circle {
      background: rgba(252, 124, 124, 0.1) !important;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1) !important;
      .in-circle {
        background: rgba(252, 124, 124, 1) !important;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1) !important;
      }
    }

    .out-circle {
      position: absolute;
      top: -8px;
      left: -8.8px;
      width: 16px;
      height: 16px;
      background: rgba(113, 101, 163, 0.1);
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      /*opacity: 0.1;*/
      border-radius: 50%;
      display: flex;
      align-items: center;

      .in-circle {
        width: 8px;
        height: 8px;
        margin: 0 auto;
        background: #409eff;
        border-radius: 50%;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      }
    }

    .timeline-date {
      width: 100px;
      height: 50px;
      //background: lightpink;
      position: absolute;
      top: -8px;
      left: -119px;
      font-size: 14px;
      color: #999999;
      text-align: right;
    }

    .timeline-content {
      position: relative;
      top: -20px;
      //padding: 0 0 20px 20px;
      padding-left: 20px;
      //width: calc(100% - 100px);
      &_box {
        position: relative;
        //border: 2px solid #409eff;
        //border-radius: 8px;
        padding: 10px;

        .box-title {
          font-size: 14px;
          word-break: break-all;
          margin-bottom: 10px;
          color: #333;
          font-weight: 500;
        }

        .box-desc {
          font-size: 16px;
          color: #999999;
        }
      }
    }
  }
}
.m-r {
  margin-right: 5px;
}
.audit-item {
  position: relative;
  line-height: 32px;
  width: 530px;
}
.blue {
  color: #3E9DFF;
}
.red {
  color: #FC7C7C;
  margin-left: 10px;
}
.gray {
  color: #CCc;
}
.yellow {
  color: #fcba39;
}
.blue-dot {
  position: absolute;
  background: #409eff;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 5px;
}
.blue-line {
  position: absolute;
  height: 100%;
  /* width: 2px; */
  border-left: 1.6px dashed #409eff;
  top: 22px;
  left: 4px;
}
.d-i-b {
  display: inline-block;
}
.el-tag {
  margin-right: 10px;
}
.custom-css {
  border: 1px solid #d6eaff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-top: 25px;
}
</style>
