<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="100px"
    >
      <el-form-item
        label="名称"
        prop="keyWords1"
      >
        <el-input
          v-model="form.keyWords1"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item
        label="起始时间"
        prop="startDate"
      >
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="起始时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item
        label="截止时间"
        prop="endDate"
      >
        <el-date-picker
          v-model="form.endDate"
          type="datetime"
          placeholder="截止时间">
        </el-date-picker>
      </el-form-item>

      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="()=>{
            getList(),id=0
          }"
        >
          查询
        </el-button>
        <el-button
          type="primary"
          @click="$refs.dialog.show(null,'add')"
        >
          新增子项目
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        数据权限列表
      </div>
      <el-table
        ref="expandTable"
        border
        stripe
        @expand-change="expandChange"
        v-loading="loading"
        :data="tableData">
        <el-table-column type="expand">
          <template slot-scope="props">
            <table
              class="table"
              v-if="props.row.info.length">
              <tr>
                <th>关联大类</th>
                <th>关联子类</th>
                <th>绑定子类</th>
              </tr>
              <tr
                v-for="(val,key) in props.row.info"
                :key="key">
                <td>
                  {{ val.name }}
                </td>
                <td>
                  <el-tag
                    v-for="(i,j) in val.value"
                    :key="j"
                  >
                    {{ i.name }}
                  </el-tag>
                </td>
                <td>
                  <el-link @click="openBind(val,props.row.id,props.row.name)">
                    绑定
                  </el-link>
                </td>
              </tr>
            </table>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime| formatTime }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              size="small"
              @click="$refs.dialog.show(scope.row,'edit')"
            >
              编辑
            </el-link>
            <el-link
              type="primary"
              size="small"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="getList()"
        :total="total">
      </el-pagination>
    </div>

    <Dialog
      ref="dialog"
      @update="getList"></Dialog>

    <Detail ref="detail"></Detail>

    <Bind
      ref="bind"
      @update="getList"></Bind>
  </div>
</template>

<script>
import { subProjectList, deleteSubProject } from '@/api/ticketType'
import Dialog from './Dialog'
import Detail from './Detail'
import Bind from './Bind'

const nameMap = {
  'managerList': '用户',
  'scenicList': '景点',
  'ticketTypeList': '票种',
  'ticketSpotList': '售票点',
  'batchConfigList': '场次',
  'scheduleConfigList': '班次',
  'travelAgencyList': '旅行社',
  'memberTypeList': '会员',
  'performList': '节目',
  'guideList': '导游'
}

export default {
  created () {
    this.getList()
  },
  components: {
    Dialog,
    Detail,
    Bind
  },
  data () {
    return {
      form: {
        keyWords1: '',
        startDate: null,
        endDate: null,
        pageNum: 1,
        pageSize: 10
      },
      total: 1,
      loading: false,
      tableData: [],
      id: 0
    }
  },
  methods: {
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList () {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.form))

      subProjectList(params).then(res => {
        this.tableData = res?.data.list
        this.total = res?.data.total

        this.tableData.forEach(val => {
          this.$set(val, 'expanded', false)
        })

        if (this.id) {
          let row = this.tableData.find(v => this.id === v.id)
          if (row) {
            this.$nextTick(() => {
              this.$refs.expandTable.toggleRowExpansion(row, true)
            })
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleDelete (id) {
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSubProject({ id }).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {})
    },
    expandChange (row, expandedRows) {
      if (row.info) return
      row.info = []
      Object.keys(row).forEach((v) => {
        if (v.endsWith('List')) {
          row.info.push({
            key: v,
            name: nameMap[v],
            value: row[v] || []
          })
        }
      })
    },
    openBind (record, id, name) {
      this.$refs.bind.show(record, id, name)
      this.id = id
    }
  }
}
</script>

  <style lang="scss" scoped>
.table{
    width: 100%;
    border-spacing: 0;
}
.table th,.table td {
    padding: 10px 20px; border: 1px solid #ddd;
}
.table th {
    background: #eee;
}
  </style>
