<template>
  <div class="app-container">
    <el-card class="app-container__search">
      <xd-search
        v-if="searchForm.length > 0"
        :list="searchForm"
        dateFilter
        v-model="searchParams"
        @onSearch="handleSearch"
      ></xd-search>
    </el-card>
    <el-card class="app-container__list">
      <div class="app-container__list-pagination">
        <xd-pagination-custom
          :pagesize="pageSize"
          :has-next-page.sync="hasNextPage"
          @onPagination="handlePagination"
        ></xd-pagination-custom>
        <div v-if="1">自定义模块</div>
      </div>
      <div class="app-container__list-table">
        <el-table class="app-table" :data="tables" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="ID" width="80" prop="id"></el-table-column>
          <el-table-column align="center" width="70" label="类型" prop="adjust_type_name"></el-table-column>
          <el-table-column align="center" min-width="260" label="内容">
            <template slot-scope="scope">
              <div class="app-container__list-table-tag" v-if="scope.row.adjust_type === 'card_number'">
                <div v-for="(item ,index) in scope.row['card_number']" :key="index">
                  <el-tag>{{item['start_number']}} - {{item['end_number']}}</el-tag>
                </div>
              </div>
              <div class="app-container__list-table-tag oneline" v-if="scope.row.adjust_type === 'cinema'">
                <div v-for="(item ,index) in scope.row['cinema_names']" :key="index">
                  <el-tag>{{item}}</el-tag>
                </div>
              </div>
              <div class="app-container__list-table-tag oneline" v-if="scope.row.adjust_type === 'city_code'">
                <div v-for="(item ,index) in scope.row['city_code_names']" :key="index">
                  <el-tag>{{item}}</el-tag>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="200" label="调价">
            <template slot-scope="scope">
              <div v-html="setAdjust(scope.row)"></div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="200" label="添加日期" prop="create_time"></el-table-column>
          <el-table-column align="center" width="80" label="权重" prop="weight"></el-table-column>
          <el-table-column label="状态" width="120" align="center">
            <xd-table-status
              slot-scope="scope"
              :status="scope.row.status"
              :message="['正常', '禁用']"
            ></xd-table-status>
          </el-table-column>
          <el-table-column label="价格" width="120" align="center">
            <xd-table-price
              slot-scope="scope"
              :price="scope.row.min_price"
            ></xd-table-price>
          </el-table-column>
          <el-table-column align="center" label="操作" width="125" fixed="right">
            <template slot-scope="scope">
              <div class="app-container__list-table-option">
                <el-tooltip effect="dark" content="编辑" placement="top">
                  <router-link target="_blank" :to="toLink(scope.row)">
                    <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
                  </router-link>
                </el-tooltip>
                <el-tooltip effect="dark" content="删除" placement="top">
                  <el-button type="danger" @click="remove(scope.row)" size="mini" icon="el-icon-delete"></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="app-container__list-pagination">
        <xd-pagination-custom
          :pagesize="pageSize"
          :has-next-page.sync="hasNextPage"
          @onPagination="handlePagination"
        ></xd-pagination-custom>
      </div>
    </el-card>
  </div>

</template>

<script>
  import XdSearch from "@/components/XdSearch";
  import XdPaginationCustom from "@/components/XdPaginationCustom";
  import XdTableStatus from "@/components/XdTableStatus";
  import XdTablePrice from "@/components/XdTablePrice";

  export default {
    name: "AppAdjustList",
    components: {
      XdTablePrice,
      XdTableStatus,
      XdPaginationCustom,
      XdSearch
    },

    data(){
      return {
        pageSize: 1,//当前页面数量
        hasNextPage: true, //是否有下一页

        searchForm: [], //搜索区域模块表单
        searchParams: null, // 搜索参数

        tables: [{"id":13,"adjust_type":"card_number","adjust_type_name":"卡号","halls":[],"hall_names":[],"cinemas":[],"cinema_names":[],"city_codes":[],"city_code_names":[],"card_number":[{"start_number":101001000000220,"end_number":101001000000220}],"min_price":36,"price":1,"valid_week":[],"valid_week_name":[],"price_type":"raise","price_type_name":"加价","start_valid_time":0,"end_valid_time":0,"weight":99999,"status":"Y","status_name":"正常","create_time":"2021-12-03 11:45:18","update_time":"2021-12-16 10:45:40","operator":"1","operator_name":"rzp@email.com"},{"id":15,"adjust_type":"card_number","adjust_type_name":"卡号","halls":[],"hall_names":[],"cinemas":[],"cinema_names":[],"city_codes":[],"city_code_names":[],"card_number":[{"start_number":11,"end_number":22}],"min_price":20,"price":1,"valid_week":[4,3,2,1,0,5,6],"valid_week_name":["四","三","二","一","日","五","六"],"price_type":"fixed","price_type_name":"固定值","start_valid_time":1639238400,"end_valid_time":1643385600,"weight":200,"status":"Y","status_name":"正常","create_time":"2021-12-13 11:10:43","update_time":"2021-12-13 11:25:58","operator":"1","operator_name":"rzp@email.com"},{"id":12,"adjust_type":"city_code","adjust_type_name":"城市","halls":[],"hall_names":[],"cinemas":[],"cinema_names":[],"city_codes":[],"city_code_names":[],"card_number":[],"min_price":10,"price":9,"valid_week":[4,6,5,0],"valid_week_name":["四","六","五","日"],"price_type":"raise","price_type_name":"加价","start_valid_time":0,"end_valid_time":0,"weight":23,"status":"Y","status_name":"正常","create_time":"2021-04-02 17:56:19","update_time":"2021-04-02 17:56:19","operator":"1","operator_name":"rzp@email.com"},{"id":5,"adjust_type":"card_number","adjust_type_name":"卡号","halls":[],"hall_names":[],"cinemas":[],"cinema_names":[],"city_codes":[],"city_code_names":[],"card_number":[{"start_number":20,"end_number":21},{"start_number":451202,"end_number":4512300},{"start_number":1545512121,"end_number":1545512123}],"min_price":30,"price":5,"valid_week":[4,5,3,1],"valid_week_name":["四","五","三","一"],"price_type":"raise","price_type_name":"加价","start_valid_time":0,"end_valid_time":0,"weight":21,"status":"N","status_name":"关闭","create_time":"2021-01-08 13:49:06","update_time":"2021-12-13 16:42:45","operator":"1","operator_name":"rzp@email.com"},{"id":2,"adjust_type":"cinema","adjust_type_name":"影院","halls":[],"hall_names":[],"cinemas":["51989","51992","51994","52004","52009"],"cinema_names":["北京耀莱成龙影城（慈云寺店）"],"city_codes":[],"city_code_names":[],"card_number":[],"min_price":0,"price":6,"valid_week":[],"valid_week_name":[],"price_type":"raise","price_type_name":"加价","start_valid_time":0,"end_valid_time":0,"weight":21,"status":"Y","status_name":"正常","create_time":"2020-12-29 17:20:53","update_time":"2021-01-11 17:31:52","operator":"1","operator_name":"rzp@email.com"},{"id":16,"adjust_type":"city_code","adjust_type_name":"城市","halls":[],"hall_names":[],"cinemas":[],"cinema_names":[],"city_codes":["110100"],"city_code_names":["北京市"],"card_number":[],"min_price":20,"price":10,"valid_week":[1,2,3,5],"valid_week_name":["一","二","三","五"],"price_type":"raise","price_type_name":"加价","start_valid_time":1640016000,"end_valid_time":1642608000,"weight":20,"status":"Y","status_name":"正常","create_time":"2021-12-13 11:16:06","update_time":"2021-12-16 11:41:43","operator":"1","operator_name":"rzp@email.com"},{"id":6,"adjust_type":"cinema","adjust_type_name":"影院","halls":[],"hall_names":[],"cinemas":[],"cinema_names":[],"city_codes":[],"city_code_names":[],"card_number":[],"min_price":0,"price":5,"valid_week":[],"valid_week_name":[],"price_type":"raise","price_type_name":"加价","start_valid_time":0,"end_valid_time":0,"weight":20,"status":"N","status_name":"关闭","create_time":"2021-01-08 16:29:01","update_time":"2021-01-15 17:51:27","operator":"1","operator_name":"rzp@email.com"},{"id":17,"adjust_type":"card_number","adjust_type_name":"卡号","halls":[],"hall_names":[],"cinemas":[],"cinema_names":[],"city_codes":[],"city_code_names":[],"card_number":[{"start_number":10,"end_number":20},{"start_number":20,"end_number":22},{"start_number":30,"end_number":35}],"min_price":2,"price":2,"valid_week":[5,4,3,2],"valid_week_name":["五","四","三","二"],"price_type":"raise","price_type_name":"加价","start_valid_time":1639411200,"end_valid_time":1643385600,"weight":10,"status":"Y","status_name":"正常","create_time":"2021-12-13 15:44:14","update_time":"2021-12-13 15:44:14","operator":"1","operator_name":"rzp@email.com"},{"id":14,"adjust_type":"card_number","adjust_type_name":"卡号","halls":[],"hall_names":[],"cinemas":[],"cinema_names":[],"city_codes":[],"city_code_names":[],"card_number":[{"start_number":123456,"end_number":123456}],"min_price":0,"price":1,"valid_week":[],"valid_week_name":[],"price_type":"raise","price_type_name":"加价","start_valid_time":0,"end_valid_time":0,"weight":0,"status":"Y","status_name":"正常","create_time":"2021-12-03 15:11:54","update_time":"2021-12-03 15:11:54","operator":"1","operator_name":"rzp@email.com"}]
      }
    },

    created(){
      this.initSearchForm();

    },

    methods:{
      toLink(item) {
        return '/index'
      },

      remove() {
        this.$confirm('您确定要将当前记录删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {

        });
      },

      /**
       * @description 调价显示
       */
      setAdjust(item) {
        let item1 = `<span class="red">${item['min_price'] ? item['min_price'] : '--'}</span>`;
        let item2 = `<span class="red">${item['price']}</span>`;
        return `超过${item1}元，${item['price_type_name']}${item2}元`;
      },

      /**
       * @description 初始化搜索模块
       */
      initSearchForm(){
        let searchForm = [
          {
            label: '调价类型:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'adjust_type', //form[valueKey]
            value: '', //v-model
            placeholder: '请调价类型',
            multiple: false,
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },
          {
            label: '状态:', //label
            ele: 'xd-select-status', //package 名称
            valueKey: 'status', //form[valueKey]
            value: '', //v-model
            isall: true,
            backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
            placeholder: '请选择',
            list: 'status', //status=>状态  best=>推荐  associate=>关联 yes=>是否 open=> 是否开启  check=>审核
          },
        ];

        this.searchForm = searchForm;

      },

      /**
       * @description 搜索事件
       * @param action 动作
       * @param form 搜索请求参数
       */
      handleSearch({action, form}){
        console.log(this.searchParams)
      },


      handlePagination() {
        if (this.pageSize > 3) this.hasNextPage = false;
        else this.hasNextPage = true;
      }
    }
  }
</script>

<style scoped>

</style>
