
<template>
  <div class="app-container">
    <template v-if="isTable">
      <el-table
        class="table"
        ref="table_form"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          label="序号"
          align="center"
          width="80px"
          type="index"
        />
        <el-table-column label="机场公司账号" align="center">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="操作区" width="250">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="create(scope.row)"
              >审核流管理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div v-else class="page">
      <div>
        <strong class="tit">{{ rowData.username }}审核流管理</strong>
        <el-button type="primary" size="small" @click="isTable = true"
          >返回</el-button
        >
      </div>
      <div class="app-container1 flex">
        <div v-for="(item, index) in auditList" :key="index" class="flex">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <div class="flex2">
                <span>{{ item.auditName }}</span>
                <i>固定环节</i>
              </div>
            </div>
            <div class="content">
              <i class="text">审核员列表</i>
              <div class="user flex">
                <div>
                  <i class="el-icon-plus photo" @click="adduserFun(item)"></i>
                </div>
                <div
                  class="flex1"
                  v-for="(item1, index1) in item.userList"
                  :key="index1"
                >
                  <el-image
                    v-if="item1.avatar"
                    class="photo"
                    :src="item1.avatar"
                    :preview-src-list="[item1.avatar]"
                  ></el-image>
                  <span class="photo" v-else>暂无</span>
                  <span class="name">{{ item1.name }}</span>
                </div>
              </div>
            </div>
          </el-card>
          <img class="arrow" src="../../assets/arrow.png" alt="" />
        </div>
        <!--对话框-->
        <addUser
          v-if="userDialogVisible"
          :form1="form"
          :dialogVisible="userDialogVisible"
          @close="userDialogVisible = false"
          @getform="getform"
          :adminType="2"
          :rowData="rowData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { checkRole } from "@/utils/checkRole";
import { airportList, safeThingsGongAnList ,safeThingsEdit} from "@/api/audit";
import addUser from "@/views/auditManagement/compoment/addUser.vue";
export default {
  components: { addUser },
  filters: {},
  computed: {},
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      auditList: [],
      isTable: true,
      rowData: {},
      userDialogVisible: false,
      form:{},
    };
  },
  created() {
    this.fetchData();
  },
  watch: {},
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      airportList(this.page).then((res) => {
        this.list = res.data;
        this.listLoading = false;
      });
    },
    async create(row) {
      safeThingsGongAnList(row.adminId).then((res) => {
        this.auditList = res.data;
        this.rowData = row;
        this.isTable = false;
      });
    },
    adduserFun(row) {
      this.form = Object.assign(this.form, row);
      this.userDialogVisible = true;
    },
    getform(form, type) {
      safeThingsEdit(form).then((res) => {
        this.fetchData();
        this.isTable=true
        this.userDialogVisible = false;
        this.$message({
          type: "success",
          message: "操作成功!",
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.tit {
  display: inline-block;
  margin-right: 20px;
}
.box-card {
  width: 370px;
  // height: 286px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.clearfix {
  span {
    color: #333333;
    font-size: 20px;
  }
  i {
    display: inline-block;
    font-size: 14px;
    color: #5babfe;
    padding: 5px 10px;
    border: 1px solid #3e9dff;
    border-radius: 8px;
  }
}
.btn {
  width: 100%;
  margin-top: 21px;
  text-align: center;
  .el-button {
    display: inline-block;
  }
}
.content {
  border: 1px solid #ecf0fb;
  border-radius: 8px;
  .text {
    color: #909399;
    float: right;
    font-size: 14px;
    margin-top: 15px;
    margin-right: 20px;
  }
}
.user {
  margin-top: 48px;
  padding: 0 20px 12px;
  overflow-x: auto;
}
.photo {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  margin-right: 12px;
  color: #c0c4cc;
  text-align: left;
  font-size: 14px;
  background-color: #f5f7fa;
}
.el-icon-plus {
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  background: #f7f8fc;
  border: 1px solid rgba(196, 202, 215, 0.46);
  color: #909399;
}
.flex2 {
  display: flex;
  justify-content: space-between;
}

.flex1 {
  display: flex;
  flex-direction: column;
  justify-content: left;
  flex-wrap: wrap;
}
.table-img {
  width: 50px;
  height: 50px;
}
.name {
  width: 50px;
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  text-align: center;
}
.arrow {
  width: 56px;
  height: 116px;
  margin: 85px 8px 0 16px;
}
.add-link {
  // width: 44px;
  height: 40px;
  margin-top: 120px;
  margin-right: 16px;
}
.flex {
  flex-wrap: nowrap;
}
</style>
