<template>
  <el-drawer
    :title="`区县接入系统-${areaInfo.areaName}`"
    :visible.sync="drawer"
    size="40%"
    @close="handleClose"
  >
    <div class="main w-full">
      <el-button size="small" type="primary" @click="addSystem">添加</el-button>
      <el-table :data="accessSystemList" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="systemName" align="center" label="系统名称">
          <template slot-scope="scope">
            <el-input
              size="small"
              placeholder="请输入"
              v-model="scope.row.systemName"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="systemCode" align="center" label="系统编码">
          <template slot-scope="scope">
            <el-input
              size="small"
              placeholder="请输入"
              v-model="scope.row.systemCode"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="accessTime"
          align="center"
          label="接入日期"
          width="220"
        >
          <template slot-scope="scope">
            <el-date-picker
              style="width: 150px"
              size="small"
              v-model="scope.row.accessTime"
              type="date"
              placeholder="选择日期"
              value-format="timestamp"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          align="center"
          prop="enabled"
          label="启\停用"
        >
          <template slot-scope="scope">
            <YSwitch
              active-text="启用"
              inactive-text="停用"
              v-model="scope.row.enabled"
            ></YSwitch>
          </template>
        </el-table-column>
        <el-table-column align="center" width="60" prop="enabled" label="删除">
          <template slot-scope="scope">
            <i
              class="el-icon-remove delete cursor-pointer text-[24px]"
              @click="delSystem(scope)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" @click="handleReset">重 置</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        @click="handleOk"
        >确 定</el-button
      >
    </div>
  </el-drawer>
</template>

<script>
import { saveAccess, deleteSystem } from "@/api/system";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    systemList: {
      required: true,
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      form: {
        systemName: "",
        systemCode: "",
        accessTime: "",
        enabled: 1,
      },
      accessSystemList: [],
      areaInfo: {},
    };
  },
  computed: {
    drawer: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },

  methods: {
    addSystem() {
      let row = this.$cloneDeep(this.form);
      this.accessSystemList.push(row);
    },
    handleClose() {
      this.$resetForm("form");
      this.drawer = false;
    },
    handleReset() {
      this.$resetForm("form");
      this.drawer = false;
    },

    onAdd(row) {
      this.areaInfo = row;
      this.accessSystemList = this.areaInfo.accessSystemList || [];
    },
    async handleOk() {
      this.loading = true;
      // this.accessSystemList.forEach((v) => {
      //   v.accessId = this.areaInfo.id;
      // });
      this.areaInfo.accessSystemList = this.accessSystemList;
      let res = await saveAccess(this.areaInfo);
      let { code, msg } = res.data;
      if (code === 1) {
        this.$message.success(msg);
        this.$emit("success");
        this.handleClose();
      }
      this.loading = false;
    },
    async delSystem({ row, $index }) {
      if (row.id) {
        let res = await deleteSystem({ id: row.id });
        if (res.data.code == 1) {
          this.$message.success(res.data.msg);
        }
      }
      this.accessSystemList.splice($index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-drawer__body) {
  padding: 0px !important;
  display: flex;
  flex-direction: column;
}
.main {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}
.footer {
  width: 100%;
  padding: 20px;
  border-top: 1px solid #ececec;
  background-color: #fff;
  text-align: right;
}
</style>
