<template>
  <div class="AppAdministrativeLicense">
    <ai-list>
      <ai-title slot="title" title="行政许可登记" isShowBottomBorder />
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" @click="addBtn">+添加</el-button>
          </template>
          <template #right>
            <el-input size="small" placeholder="经营主体/统一信用代码" v-model="search.name" clearable v-throttle="() => {(page.current = 1), getTableData();}"/>
            <el-button size="small">导入</el-button>
            <el-button size="small">导出</el-button>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size" @getList="getTableData" :col-configs="colConfigs" :dict="dict" @selection-change="   (v) => (ids = v.filter((e) => e.sysUserId).map((e) => e.sysUserId)) ">          
          <el-table-column slot="options" label="操作" fixed="right" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" @click="showDetail(row.id)">详情</el-button>
            </template>
            <template slot-scope="{ row }">
              <el-button type="text" @click="delete row.id">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog title="新增许可信息" :visible.sync="dialog" width="1000px" @onConfirm="confirm">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
        <el-form-item required label="许可文书名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-row type="flex">
          <el-col :span="20">
            <el-form-item required label="许可文书号" prop="name">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item required label="许可决定日期" prop="name">
              <el-date-picker style="width: 300px;" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="20">
            <el-form-item required label="许可有效期自" prop="name">
              <el-date-picker style="width: 300px;" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item required label="许可有效期至" prop="name">
              <el-date-picker style="width: 300px;" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item required label="许可机关" prop="name">
          <el-input v-model="form.name" placeholder="请输入使用人姓名"></el-input>
        </el-form-item>
        <el-row type="flex">
          <el-col :span="20">
            <el-form-item required label="经营主体" prop="name">
              <el-input v-model="form.name" placeholder="请输入许可对象"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item required label="统一信用代码" prop="name">
              <el-input v-model="form.name" placeholder="请输入统一信用代码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item required label="许可内容" prop="name">
          <el-input v-model="form.name" type="textarea" placeholder="请输入许可内容" :rows="5" resize="none" show-word-limit :maxlength="500"
          ></el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </div>
</template>

<script>
export default {
  name: "AppAdministrativeLicense",
  label: "行政许可信息",
  // components: {PumList, PumDetail},
  
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      search: { name: "" },
      tableData: [],
      page: { current: 1, size: 10, total: 0 },
      dialog: false,
      form: { name: "" },
    };
  },
  computed: {
    colConfigs() {
      return [
        {
          label: "许可文书号",
          prop: "position",
          align: "center",
          width: "260px",
        },
        {
          label: "许可有效期至",
          prop: "position",
          align: "center",
          width: "200px",
        },
        {
          label: "许可机关",
          prop: "position",
          align: "center",
          width: "200px",
        },
        {
          label: "许可对象",
          prop: "position",
          align: "center",
          width: "200px",
        },
        {
          label: "统一信用代码",
          prop: "position",
          align: "center",
          width: "200px",
        },
        {
          label: "更新时间",
          prop: "position",
          align: "center",
          width: "120px",
        },
        { label: "操作人", prop: "position", align: "center", width: "150px" },
        { slot: "options" },
      ];
    },
    rules() {
      return {
        name: [{ required: true, message: "请输入许可文书名称" }],
      };
    },
  },
  methods: {
    getTableData() {
      // this.instance.post("/appportaluserenterprise/list", null, {
      //   params: {...this.page, ...this.search, status: 1,...this.select}
      // }).then(res => {
      //   if (res?.data) {
      //     this.tableData = res.data?.records
      //     this.page.total = res.data.total
      //   }
      // })
    },
    addBtn() {
      this.dialog = true;
    },
    showDetail(id) {
      this.$router.push(`./detial?id=${id}`)
    },
    delete(id) {
      this.$confirm("是否要删除？").then(() => this.deleteInfo(id));
    },
    deleteInfo() {},
  },
};
</script>

<style lang="scss" scoped>
.AppAdministrativeLicense {
}
</style>