<template>
  <div>
    <a-card title="查询条件">
      <span slot="extra">
        <a-button
          size="small"
          type="primary"
          icon="plus"
          @click="openAddModal"
        >
          新建计费类型
        </a-button>
      </span>
      <!-- 查询条件 -->
      <a-form-model class="search-box form-wrap" @submit.native.prevent="getBillingTypeList">
        <a-form-model-item
          label="计费类型名称"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.name"></a-input>
        </a-form-model-item>
        <a-form-model-item
          label="状态"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
          prop="status"
        >
          <a-select v-model="form.status" style="width:120px">
            <a-select-option value=""> 全部 </a-select-option>
            <a-select-option :value="1"> 启用 </a-select-option>
            <a-select-option :value="0"> 禁用 </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 价格暂不筛选 -->
        <a-form-model-item
          v-if="false"
          label="价格"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
          prop="price"
        >
          <a-input-number
            :min="0"
            v-model="form.price"
          >
          </a-input-number>
        </a-form-model-item>
        <!-- 计费类型暂不筛选 -->
        <a-form-model-item
          label="计费类型"
          v-if="false"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
          prop="type"
        >
          <a-select style="width:120px" v-model="form.type">
            <a-select-option value="HOUR"> 小时 </a-select-option>
            <a-select-option value="DAY"> 天 </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 计费类型值暂不筛选 -->
        <a-form-model-item
          label="计费类型值"
          v-if="false"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
          prop="value"
        >
          <a-input-number
            :min="0"
            v-model="form.value"
            :placeholder="['HOUR','DAY'].includes(form.type)? (form.type === 'HOUR'? '小时数':(form.type === 'DAY'?'天数':form.type)):''"
          >
          </a-input-number>
        </a-form-model-item>
        <a-button
          type="primary"
          html-type="submit"
        >
          搜索
        </a-button>
        <a-button
          type="primary"
          @click="resetSearchForm"
        >
          重置
        </a-button>

      </a-form-model>
    </a-card>
    <a-card title="计费类型列表">
      <!-- 表格 -->
      <a-spin :spinning="billingTypeloading">
        <a-table
          :columns="columns"
          :pagination="pagination"
          :data-source="billingTypeList"
          :row-key="record => record.id">
          <!-- 状态 -->
          <template
            slot="status"
            slot-scope="text, record"
          >
            <span :style="{color: record.status===1?'#1BAAAC':'#81A1A2'}">
              {{ record.status===1?'已激活':'已禁用' }}
            </span>
            &nbsp;
            <a-button
              size="small"
              :type="record.status===1?'danger':'default'"
              @click="handleActive(record)"
            >
              {{ record.status===1?'禁用':'激活' }}
            </a-button>
          </template>
          <!-- 计费类型 -->
          <template
            slot="type"
            slot-scope="text, record"
          >
            {{ record.type === 'HOUR'? '小时':(record.type === 'DAY'?'天':record.type) }}
          </template>
          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-popconfirm
              title="确定要删除此计费类型吗？"
              @confirm="handleDelete(record.id)"
            >
              <a-icon
                slot="icon"
                type="question-circle-o"
                style="color: red"
              />
              <a-button
                size="small"
                type="danger"
              >
                删除
              </a-button>
            </a-popconfirm>
          </template></a-table>
      </a-spin>
    </a-card>
    <!-- 新增计费类型弹窗 -->
    <a-modal
      :visible="addModalVisible"
      @cancel="addModalVisible=false"
      @ok="handleAddOk"
    >
      <div class="block-title">
        新增计费类型
      </div>
      <a-form-model :model="addform" ref="addform">
        <a-form-model-item label="计费类型名称" v-bind="formItemLayout" :rules="[{ required: true, message: '请输入' }]" prop="name">
          <a-input v-model="addform.name"></a-input>
        </a-form-model-item>
        <a-form-model-item v-if="false" label="价格" v-bind="formItemLayout" :rules="[{ required: true, message: '请输入' }]" prop="price">
          <a-input-number
            :min="0"
            v-model="addform.price"
          >
          </a-input-number>
        </a-form-model-item>
        <a-form-model-item label="计费类型" v-bind="formItemLayout" :rules="[{ required: true, message: '请输入' }]" prop="type">
          <a-select style="width:120px" v-model="addform.type">
            <a-select-option value="HOUR"> 小时 </a-select-option>
            <a-select-option value="DAY"> 天 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="计费类型值" v-bind="formItemLayout" :rules="[{ required: true, message: '请输入' }]" prop="value">
          <a-input-number
            :min="0"
            v-model="addform.value"
            :placeholder="['HOUR','DAY'].includes(addform.type)? (addform.type === 'HOUR'? '小时数':(addform.type === 'DAY'?'天数':addform.type)):''"
          >
          </a-input-number>
          <span v-if="['HOUR','DAY'].includes(addform.type)">
            ( {{ addform.type === 'HOUR'? '小时':(addform.type === 'DAY'?'天':addform.type) }})
          </span>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { createBillingType, getBillingType, updateBillingType, deleteBillingTypeById } from '@/api/ticketSetting/billingType'

export default {
  data () {
    return {
      billingTypeloading: false,
      addModalVisible: false,
      editModalVisible: false,
      billingTypeList: [],
      pagination: {},
      // 查询表单
      form: {
        name: '',
        status: '', // 查询表单不限制status，设置空字符串 状态，1启用，0禁用
        price: '',
        type: '',
        value: ''
      },
      // 新增表单
      addform: {
        name: '',
        status: 1, // 新增的状态默认1
        price: '',
        type: '',
        value: ''
      },
      columns: [
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: '名字',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '计费类型名称',
          dataIndex: 'type',
          key: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '计费类型值',
          dataIndex: 'value',
          key: 'value',
          scopedSlots: { customRender: 'value' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      }
    }
  },

  async created  () {
    await this.getBillingTypeList()
  },
  methods: {
    async getBillingTypeList () {
      const res = await getBillingType(this.form)
      this.billingTypeList = res.extraInfo.list
    },
    async refreshPage () {
      await this.getBillingTypeList()
    },
    async openAddModal () {
      this.addModalVisible = true
    },
    async handleActive (record) {
      const params = {
        id: record.id,
        status: (record.status === 1 ? 0 : 1)
      }
      const res = await updateBillingType(params)
      if (+res.resCode !== 200) {
        this.$message.error('操作失败')
        return
      }
      await this.refreshPage()
      this.$message.success('操作成功')
    },
    async handleDelete (id) {
      const res = await deleteBillingTypeById(id)
      if (+res.resCode !== 200) {
        this.$message.error('删除失败')
        return
      }
      await this.refreshPage()
      this.$message.success('删除成功')
    },
    // 重置搜索表单
    resetSearchForm () {
      this.form = {
        name: '',
        status: '', // 新增搜索表单的状态默认不选
        price: '',
        type: '',
        value: ''
      }
    },
    // 重置新增表单
    resetAddForm () {
      this.addform = {
        name: '',
        status: 1, // 新增的状态默认1
        price: '',
        type: '',
        value: ''
      }
    },
    async handleAddOk () {
      this.$refs.addform.validate(validate => {
        console.log('validate', validate)
        if (validate) {
          createBillingType(this.addform).then((res) => {
            if (res.resCode === 200) {
              this.refreshPage()
              this.resetAddForm()
              this.addModalVisible = false
              this.$message.success('新增成功')
            } else {
              this.$message.error('新增失败')
              this.addModalVisible = false
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.form-wrap {
  ::v-deep .ant-form-item {
    display: inline-block;  width: 33%;
  }
}

</style>
