<template>
  <div class="form-wrap">
    <el-form
      class="searchBox"
      ref="form"
      :model="form"
      :inline="true"
      label-width="140px">
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="名称"
        prop="keyWords1">
        <el-input v-model="form.keyWords1"></el-input>
      </el-form-item>
      <el-form-item
        label="类型"
        prop="keyWords2">
        <el-select v-model="form.keyWords2">
          <el-option
            value=""
            label="全部"
          ></el-option>
          <el-option
            label="游客"
            :value="1"
          ></el-option>
          <el-option
            label="多人卡"
            :value="2"
          ></el-option>
          <el-option
            label="居民"
            :value="3"
          ></el-option>
          <el-option
            label="管理员"
            :value="4"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否IC卡通关"
        prop="keyWords3">
        <el-select v-model="form.keyWords3">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否身份证通关"
        prop="keyWords4">
        <el-select v-model="form.keyWords4">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否人脸通关"
        prop="keyWords5">
        <el-select v-model="form.keyWords5">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否可售"
        prop="keyWords6">
        <el-select v-model="form.keyWords6">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否指纹通关"
        prop="keyWords7">
        <el-select v-model="form.keyWords7">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getMemberList">
          搜索
        </el-button>

        <el-button
          type="primary"
          @click="openDialog('add')">
          新增会员类型
        </el-button>
      </div>
    </el-form>

    <div class="tableBox">
      <div class="block-title">
        会员类型
      </div>
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              inline
              class="table-expand">
              <el-form-item label="通关方式">
                <span>{{ props.row.checkWay }}</span>
              </el-form-item>
              <el-form-item label="检票类型">
                <span>
                  {{
                    [
                      props.row.check_pattern,
                      props.row.scenic_check_times_type,
                      props.row.valid_days,
                      props.row.check_limit_times
                    ] | complicatedCheckType
                  }}
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="类型名称">
        </el-table-column>
        <el-table-column
          label="会员大类">
          <template slot-scope="scope">
            {{ scope.row.category | memberCategory }}
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          prop="scenicText"
          label="适用景点">
        </el-table-column>
        <el-table-column
          width="100"
          prop="capital"
          label="价格">
        </el-table-column>
        <el-table-column
          width="180px"
          label="可售日期">
          <template slot-scope="scope">
            {{ scope.row.sell_startdate | formatDate }} 至 {{ scope.row.sell_enddate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          width="180px"
          label="游玩日期">
          <template slot-scope="scope">
            {{ scope.row.play_startdate | formatDate }} 至 {{ scope.row.play_enddate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.is_sell ? '已激活' : '已禁用' }}</span>
            <el-button
              type="text"
              size="small"
              @click="setSale(scope.row, 0)"
              class="offSale-btn"
              v-if="scope.row.is_sell">
              <i class="iconfont icon-offSale"></i>禁用
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="setSale(scope.row, 1)"
              class="onSale-btn"
              v-else>
              <i class="iconfont icon-onSale"></i>激活
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="openDialog('edit', scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="delRow(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        @current-change="getMemberList"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <!-- 门票弹框 -->
    <ElDialog
      :title="dialogType === 'new' ? '新增卡类' : '编辑卡类'"
      width="1000px"
      v-model="dialogVisible">
      <DialogEdit
        :dialog-type="dialogType"
        :current-item="currentItem"
        :scenic-list="scenicList"
        :invoice-seller="InvoiceSeller"
        @updateList="getMemberList"
      ></DialogEdit>
    </ElDialog>
  </div>
</template>

<script>
import { getScenic, listInvoiceSales } from '@/api/ticketType'
import { getMemberType, apiMember } from '@/api/member'
import moment from 'moment'
import ElDialog from '@/components/Dialog'
import DialogEdit from './memberType/DialogEdit'
export default {
  name: 'memberType',
  data () {
    return {
      total: 0,
      loading: false,
      tableData: [],
      dialogType: 'edit',
      dialogVisible: false,
      dialogEditVisible: false,
      currentItem: {},
      scenicList: [],
      form: {
        keyWords1: '',
        keyWords2: '',
        keyWords3: '',
        keyWords4: '',
        keyWords5: '',
        keyWords6: '',
        keyWords7: '',
        pageNum: 1,
        pageSize: 10
      },
      InvoiceSeller: []
    }
  },
  async created () {
    this.loading = true
    await this.getScenicList()
    this.getMemberList()
    this.getInvoiceSeller()
  },
  components: {
    ElDialog,
    DialogEdit
  },
  methods: {
    getInvoiceSeller () {
      listInvoiceSales({}).then(res => {
        this.InvoiceSeller = res?.data
      })
    },
    openDialog (type, item) {
      this.dialogType = type
      this.currentItem = item
      this.dialogVisible = true
    },
    // 获取景点列表
    getScenicList () {
      return getScenic().then(res => {
        let treeArr = res?.data.children.map(item => item.data)
        this.scenicList = treeArr
      })
    },
    getScenicName (id) {
      let scenic = this.scenicList.find(s => s.id === id)
      return scenic ? scenic.name : ''
    },
    // 获取会员卡类型列表
    getMemberList () {
      this.loading = true
      getMemberType(this.form).then(res => {
        this.total = res.total
        res.list.forEach(item => {
          this.formatRow(item)
        })
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })
    },
    // 格式化表格信息
    formatRow (item) {
      item.scenicText = item.memberTypeScenic.map(s => {
        return this.getScenicName(s.scenic_id)
      }).join('、')
      let checkWayList = []
      if (item.idcard_check) checkWayList.push('身份证')
      if (item.face_check) checkWayList.push('人脸识别')
      if (item.iccard_check) checkWayList.push('IC卡')
      if (item.fingerprint_check) checkWayList.push('指纹')
      item.checkWay = checkWayList.join('、')
    },
    showEditDialog (item) {
      this.dialogEditVisible = true
      this.currentItem = item
    },
    reset () {
      this.$refs.form.resetFields()
    },
    formatTime (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    delRow (row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiMember('deleteMemberType', row).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getMemberList()
        })
      }).catch(() => {
      })
    },
    setSale (item, n) {
      let params = Object.assign({}, item)
      params.is_sell = n
      apiMember('updateMemberType', params).then(res => {
        this.$message.success('设置成功')
        this.getMemberList()
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .info-form {
    display: flex;
    flex-wrap: wrap;
    .info-form-item {
      width: 33%;
      display: flex;
      align-items: center;
      .info-form-label {
        flex-shrink: 0;
        width: 70px;
        padding-right: 12px;
        color: #64667B;
      }
    }
  }
</style>
