<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="100px">
        <el-form-item
          label="名称"
          prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="票种id"
          prop="ticketTypeId">
          <el-input v-model="form.ticketTypeId"></el-input>
        </el-form-item> -->
        <!-- <el-form-item
          label="是否可售"
          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>
      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="getTicketTypeList">搜索</el-button>
        <el-button
          type="primary"
          class="btn"
          v-if="canEdit"
          plain
          @click="showDialog('add')">新增票种</el-button>
      </div>
    </div>

    <div class="tableBox">
      <!-- <div class="block-title">查询信息</div> -->
      <el-table
        stripe
        row-class-name="is-center"
        v-loading="loading"
        :data="tableData"
      >
        <el-table-column type="expand">
          <template
            slot-scope="scope"
            v-if="scope.row.batchConfigList && scope.row.batchConfigList.length > 0">
            <el-table :data="scope.row.batchConfigList">
              <el-table-column
                prop="name"
                label="场次名称">
              </el-table-column>
              <el-table-column
                prop="startTime"
                label="开始时间">
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="结束时间">
              </el-table-column>
              <el-table-column
                prop="saleStopMinutes"
                label="开场后X分钟停止售票">
              </el-table-column>
              <el-table-column
                prop="cancelStopBeforeStartMinutes"
                label="开场前X分钟停止退票">
              </el-table-column>
              <el-table-column
                prop="cancelStopAfterStartMinutes"
                label="开场后X分钟停止退票">
              </el-table-column>
              <el-table-column
                prop="preCheckMinutes"
                label="开场前X分钟允许检票">
              </el-table-column>
              <el-table-column
                prop="stopCheckMinutes"
                label="开场后X分钟停止检票">
              </el-table-column>
              <el-table-column
                prop="maxSaleNums"
                label="最大售票数">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="票种名称"
        >
        </el-table-column>
        <el-table-column
          prop="ticketTypeId"
          label="线下票种id"
        ></el-table-column>
        <!-- <el-table-column
          prop="price"
          label="票价"
          width="60"
        >
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column
          label="可售日期"
        >
          <template slot-scope="scope">
            {{ scope.row.sellStartDate | formatDate }} 至 {{ scope.row.sellEndDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          label="游玩日期"
        >
          <template slot-scope="scope">
            {{ scope.row.useStartDate | formatDate }} 至 {{ scope.row.useEndDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          label="当日游玩时段"
        >
          <template slot-scope="scope">
            {{ scope.row.useTimeStart }} 至 {{ scope.row.useTimeEnd }}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="状态"
        >
          <template
            slot-scope="scope"
          >
            <span>{{ scope.row.isSell ? '已激活' : '已禁用' }}</span>
            <span
              class="wrapper"
              v-if="canEdit">
              <el-button
                type="text"

                @click="offSale(scope.row)"
                class="offSale-btn"
                v-if="scope.row.isSell"
              >
                <i class="iconfont icon-offSale"></i>禁用
              </el-button>
              <el-button
                type="text"

                @click="onSale(scope.row)"
                class="onSale-btn"
                v-else
              >
                <i class="iconfont icon-onSale"></i>激活
              </el-button>
            </span>
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作"
          width="120"
          v-if="canEdit"
        >
          <template slot-scope="scope">
            <el-button
              type="text"

              @click="showDialog('edit',scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              v-if="projectName==='YINXIANGMAZU'"
              @click="deleteItem(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page.sync="form.pageNum"
        @current-change="getTicketTypeList"
        :total="total">
      </el-pagination>
    </div>

    <ElDialog
      :title="dialogType === 'edit' ? '编辑票种' : '新增票种'"
      width="800px"
      v-model="dialogVisible">
      <TicketDialog
        :dialog-type="dialogType"
        :ticket-item="currentItem"
        @updateList="getTicketTypeList"></TicketDialog>
    </ElDialog>
    <ElDialog
      title="票种信息"
      width="760px"
      v-model="infoDialogVisible">
      <InfoDialog
        :ticket-item="currentItem"></InfoDialog>
    </ElDialog>
  </div>
</template>

<script>
import { getTicketTypeList, deleteTicketType, updateTicketType } from '@/api/ticketType'
import ElDialog from '@/components/Dialog'
import TicketDialog from './goodsList/Dialog'
export default {
  components: {
    ElDialog,
    TicketDialog
  },
  data () {
    return {
      form: { // 查询条件部分
        name: '', // 名称
        ticketTypeId: '', // 助记符
        pageNum: 1,
        pageSize: 10,
        export: false
      },
      loading: false, // 表格部分
      tableData: [],
      total: 0,
      dialogVisible: false, // 弹框部分
      infoDialogVisible: false,
      dialogType: '', // 弹框类型 'add' 或 'edit'
      currentItem: {}
    }
  },
  filters: {
    filterScenicNames (arr) {
      return arr.map(item => item.scenic_name).join('、')
    }
  },
  created () {
    this.getTicketTypeList()
  },
  computed: {
    canEdit () {
      return false
      // return this.$store.state.user.permissionList.includes('product:goods_edit')
    },
    projectName () {
      return localStorage.getItem('otaProject')
    }
  },
  methods: {
    getTicketTypeList () {
      this.loading = true
      // eslint-disable-next-line no-useless-escape
      this.form.name = this.form.name.replace(/\'/g, '')
      getTicketTypeList(this.form).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total || 0
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    // 查看票种详情
    showTicketInfo (item) {
      this.currentItem = item
      this.infoDialogVisible = true
    },
    showDialog (type, item) {
      this.dialogType = type
      this.dialogVisible = true
      this.currentItem = item
    },
    deleteItem (item) {
      this.$confirm('删除票种?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTicketType(item).then(res => {
          this.$message.success('删除成功')
          this.getTicketTypeList()
        })
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    offSale (data) {
      let form = Object.assign({}, data)
      form.isSell = 0
      updateTicketType(form).then(res => {
        this.$message.success('操作成功')
        this.getTicketTypeList()
      })
    },
    onSale (data) {
      let form = Object.assign({}, data)
      form.isSell = 1
      updateTicketType(form).then(res => {
        this.$message.success('操作成功')
        this.getTicketTypeList()
      })
    }
  }
}
</script>
