<template>
  <div>
    <div class="fa-box">
      <div class="lik">
        <div class="fa-ji">
          <div class="ge"></div>
          <div class="fa-text">账号管理</div>
        </div>
        <div class="peiches">
          <el-button type="primary"  @click="dialogVisible = true">添加结项记录</el-button>
          
        </div>
      </div>
      <div class="biaoge">
        <div class="zhonlistas">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column fixed prop="date" label="编号" style="width: 25%">
            </el-table-column>
            <el-table-column prop="name" label="系统消息模板" style="width: 25%">
            </el-table-column>
            <el-table-column prop="province" label="状态" style="width: 25%">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.province == '审核中'"
                  style="color: #e6a23c"
                  >审核中</span
                >
                <span
                  v-if="scope.row.province == '审核通过'"
                  style="color: #67c23a"
                  >审核通过</span
                >
                <span
                  v-if="scope.row.province == '审核失败'"
                  style="color: #f56c6c"
                  >审核失败</span
                >
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" style="width: 25%">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="dialogVisibleh = true"
                  >配车明细</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.province == '审核中'"
                  >审核</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tiaoshu">
        <div class="left-io"></div>
        <div class="gon">共400条</div>
        <div class="kls">
          <el-pagination
            :page-size="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="1000"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编制成套配车计划 -->
    <el-dialog
      title="权限管理"
      :visible.sync="dialogVisible"
       width="50%"
      style='margin-top:10%;'
      :append-to-body="true"
    >
      <div class="liebiao">
        <div class="lise">
          <div class="lise-left">
            <div class="shenfen">身份名称</div>
            <input
              type="text"
              class="shen-ingpuy"
              placeholder="请输入身份名称"
            />
          </div>
          <div class="lise-left">
            <div class="shenfen">身份名称</div>
            <div class="as">
              <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[5]"
                :default-checked-keys="[5]"
                :props="defaultProps"
              >
              </el-tree>
            </div>
          </div>
        </div>
        <div class="queren">
         <el-button type="primary" round @click="dialogVisible = false">确认</el-button>
          <el-button round @click='dialogVisible = false'>取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核中",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核通过",
          city: "审核通过",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核中",
          city: "审核中",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核通过",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核通过",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "审核失败",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "北京电站",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "北京电站",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "北京电站",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "北京电站",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
      ],
      dialogVisible: false,
      dialogImageUrl: "",
      data: [
        {
          id: 1,
          label: "全部选中"
         
        },
        {
          id: 2,
          label: "首页"
        },
        {
          id: 3,
          label: "运输管理",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
         {
          id: 4,
          label: "在途管理",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
         {
          id: 5,
          label: "系统管理",
          children: [
            {
              id: 7,
              label: "用户管理",
            },
            {
              id: 8,
              label: "权限管理",
            },
            {
              id: 9,
              label: "仪表类型管理",
            },
            {
              id: 10,
              label: "车辆类型管理",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    //编辑发货申请
    handleClick(row) {
      console.log(row);
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style>

.el-dialog__body {
  padding: 5px 20px;
  padding-bottom: 68px;
}
.el-dialog__title {
  font-size: 29px !important;
  color: #000000 !important;
  font-weight: 500;
}
.el-upload--picture-card {
  width: 107px !important;
  height: 107px !important;
  line-height: 107px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 107px !important;
  height: 107px !important;
  line-height: 107px !important;
}
.el-carousel__container {
  margin-top: 52px;
  height: 629px;
}
/* .el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
    margin-left: -30px;
    position:relative;
  } */
.el-table /deep/.DisabledSelection .cell:before {
  content: "全选";
  position: absolute;
  right: 42px;
}
</style>
<style scoped>
@import "../../css/fa.css";
@import "../../css/pei.css";
@import "../../css/gon.css";
</style>