{{if fileType=== 'js'}}
  {{if item.setting.search}}
    import XdSearch from "@/components/XdSearch";
  {{/if}}
  {{if item.setting.pagination}}
    import XdPaginationCustom from "@/components/XdPaginationCustom";
  {{/if}}
  import XdTable from "@/components/XdTable";
  import {Loading} from 'element-ui';
  import checkPermission from "@/utils/permission";
  import {{item.modelName}} from "@/constant/modules/{{item.modelName}}";
  {{if item.fnNames.length > 0 || item.states.length > 0}}
  import {
    {{if item.fnNames.length > 0}}
    mapActions,
    {{/if}}
    {{if item.states.length > 0}}
    mapState,
    {{/if}}
  } from 'vuex';
  {{/if}}

  /**
   * @description {{item.modeTitle}} - {{item.title}}
   * @author coder
   * @module @/pages/{{item.modelName}}/{{item.name}}.vue
   */
  export default {
    name: "{{item.pageName}}",
    components: {
      {{if item.setting.pagination}}
        XdPaginationCustom, //翻译插件
      {{/if}}
      {{if item.setting.search}}
        XdSearch, //搜查插件
      {{/if}}
      XdTable
    },
    {{if item.states.length > 0}}
    computed: {
      ...mapState('{{item.modelName}}', [
        {{each item.states}}
          '{{$value}}',
        {{/each}}
      ])
    },
    {{/if}}
    data(){
      return {
        {{if item.setting.pagination}}
          //分页参数
          pageSize: 1,//当前页面数量
          hasNextPage: true, //是否有下一页
          limit: 20,
        {{/if}}
        {{if item.setting.search}}
          //搜索参数
          searchForm: [], //搜索区域模块表单
          searchParams: null, //搜索参数
        {{/if}}

        //列表对象
        tables: [],
        headers: {{@ item.table|raw}}
      }
    },

    created(){
      {{if item.setting.search}}
      this.initSearchForm();
      {{else}}
      this.getList();
      {{/if}}
    },

    methods:{
      {{if item.fnNames.length > 0}}
      ...mapActions('{{item.modelName}}', [
        {{each item.fnNames}}
          '{{$value}}',
        {{/each}}
      ]),
      {{/if}}
      /**
       * @description 获取数据列表
       */
      getList() {

        //请求数据
        let params = {
          ...this.searchParams,
          page: this.pageSize,
          limit: this.limit
        };

        console.log(params)
        let loading = Loading.service({});

        //正式数据需要自己实现
        //todo

        //测试数据（接完接口之后需要删除）
        setTimeout(()=>{
          this.tables = {{@ item.testData}};
          loading.close()
        },500);
      },

      {{if item.methods && item.methods.link}}
      /**
       * @description 预设获取页面跳转地址方法
       * @param item
       */
      getLink(item) {
        return '/{{item.modelName}}/detail/1'
      },
      {{/if}}

      {{if item.methods && item.methods.confirm}}
      /**
       * @description 预设操作需要用户确认方法
       * @param item
       */
      handleConfirm(item) {
        this.$confirm('您确定要将当前记录删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            //todo
          })
          .catch(() => {
            //todo
          });
      },
      {{/if}}

      {{if item.setting.searchRemote}}
      /**
       * @description 搜索模块中远程搜索方法
       * @param query 搜索关键字
       * @param resolve 搜索回调方法
       */
       handleRemoteSearch({query}, resolve) {

         //仅仅为试数据，需要实现
         setTimeout(() => {
           let reslut = ["Alabama", "Alaska", "Arizona",
             "Arkansas", "California", "Colorado",
             "Connecticut", "Delaware", "Florida",
             "Georgia", "Hawaii", "Idaho", "Illinois",
             "Indiana", "Iowa", "Kansas", "Kentucky",
             "Louisiana", "Maine", "Maryland",
             "Massachusetts", "Michigan", "Minnesota",
             "Mississippi", "Missouri", "Montana",
             "Nebraska", "Nevada", "New Hampshire",
             "New Jersey", "New Mexico", "New York",
             "North Carolina", "North Dakota", "Ohio",
             "Oklahoma", "Oregon", "Pennsylvania",
             "Rhode Island", "South Carolina",
             "South Dakota", "Tennessee", "Texas",
             "Utah", "Vermont", "Virginia",
             "Washington", "West Virginia", "Wisconsin",
             "Wyoming"];
           reslut = reslut.map(item => {
             return {value: `value:${item}`, label: `label:${item}`};
           });
           let list = reslut.filter(item => {
             return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
           });
           resolve(list)
         }, 500);
       },
      {{/if}}

      {{if item.setting.search}}

      /**
       * @description 点击搜索进行搜索操作
       * @param action 动作
       * @param form 搜索请求参数
       */
      handleSearch({action, form}){
        this.pageSize = 1;
        this.hasNextPage = true;
        this.getList();
      },

      /**
       * @description 初始化搜索模块
       */
      initSearchForm(){
        this.searchForm = [
          /**input**/
          {
            label: '订单号:', //label
            ele: 'el-input', //package 名称
            valueKey: 'order_id', //form[valueKey]
            value: '', //v-model
            placeholder: '输入订单号'
          },

          /**多选选择**/
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_type_m', //form[valueKey]
            value: [], //v-model
            placeholder: '请选择加盟商',
            multiple: true, //多选
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },


          {{if item.setting.searchRemote}}
          /**远程搜索选择**/
          {
            label: '远程搜索:', //label
            ele: 'xd-select-remote', //package 名称
            valueKey: 'product_type_remote', //form[valueKey]
            value: [], //v-model //多选为数组 单选为字符串
            placeholder: '输入关键字进行搜索',
            multiple: false, //多选
          },
          {{/if}}

          /**单选选择**/
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_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=>审核
          },

          /**区间输入**/
          {
            label: '卡号区间:', //label
            ele: 'xd-range', //package 名称
            valueKey: ['start_card', 'end_card'], //form[valueKey]
            value: ['',''], //v-model
            placeholder: ['开始卡号','结束卡号'],
            width: 400
          },

          /**插槽**/
          {
            label: '插槽:', //label
            ele: 'slot', //package 名称
            slot: 'time',
          },

          /**时间插件**/
          {
            label: '添加时间:', //label
            ele: 'xd-date', //package 名称
            valueKey: ['start_time', 'end_time'], //form[valueKey]
            value: [], //v-model
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: ['开始时间', '结束时间'],
          },

          /**选择下拉与选择时间组合**/
          {
            label: '时间筛选:', //label
            ele: 'xd-date-filter',
            children: [
              /**下拉选择**/
              {
                ele: 'xd-select-list', //package 名称
                valueKey: 'order_type', //form[valueKey]
                value: 4, //v-model
                placeholder: '选择下单时间',
                list: [
                  {"label": "万利达集团", "value": 4},
                  {"label": "中国联通", "value": 5},
                  {"label": "中国移动", "value": 6},
                  {"label": "味多美", "value": 7},
                ]
              },
              /**选择时间**/
              {
                ele: 'xd-date', //package 名称
                valueKey: ['fitler_start_time', 'fitler_end_time'], //form[valueKey]
                value: [], //v-model
                format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
                formatValue: 'timestamp', //输出时间格式
                placeholder: ['开始时间', '结束时间'],
              },
            ],
          }
        ];
      },
      {{/if}}

      {{if item.setting.pagination}}
      /**
       * @description 翻页处理方法
       * @param page {Number} 访问页面页码数
       */
      handlePagination(page) {
        this.pageSize = page;
        this.getList();
      },
      {{/if}}

      //todo

    }
  }

{{else if fileType=== 'html'}}
  <template>
    <div class="app-container">
      {{if item.setting.search}}
        <el-card class="app-container__search">
          <xd-search
            dateFilter
            v-if="searchForm.length > 0"
            v-model="searchParams"
            :list="searchForm"
            {{ if item.timeType}}
            time-type
            {{/if}}
            {{if item.setting.searchRemote}}
            :remote-search="handleRemoteSearch"
            {{/if}}
            @onSearch="handleSearch"
            @onDone="getList"
          ></xd-search>
        </el-card>
      {{/if}}

      <el-card class="app-container__list">
        {{if item.setting.pagination || item.setting.ext}}
          <div class="app-container__list-pagination">
            {{if item.setting.pagination}}
              <xd-pagination-custom
                :pagesize="pageSize"
                :has-next-page.sync="hasNextPage"
                @onPagination="handlePagination"
              ></xd-pagination-custom>
            {{/if}}
            {{if item.setting.ext}}
              <div>自定义模块</div>
            {{/if}}
          </div>
        {{/if}}
        <div class="app-container__list-table">
          <xd-table
            :get-link="getLink"
            :headers="headers"
            :list="tables"
            {{if item.tableBorder}}
            is-border
            {{/if}}
          ></xd-table>
        </div>
        {{if item.setting.pagination}}
        <div class="app-container__list-pagination">
          <xd-pagination-custom
            :pagesize="pageSize"
            :has-next-page.sync="hasNextPage"
            @onPagination="handlePagination"
          ></xd-pagination-custom>
        </div>
        {{/if}}
      </el-card>
    </div>
  </template>
{{else if fileType=== 'css'}}

{{/if}}