<template>
  <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
            @custom="$vxeTableUtil.customHandle">
    <template #form>
      <div class="clearfix screen-btns">
        <div class="fl">
<!--          <vxe-button status="primary" class="button-sty" icon="el-icon-plus" @click="openEditDialog()">
            {{ $t1('新增') }}
          </vxe-button>-->
        </div>
        <div class="fr">
          <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
                      plain>{{ $t1('重置') }}
          </vxe-button>
          <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">
            {{ $t1('搜索') }}
          </vxe-button>
        </div>
      </div>
      <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData"
                @submit="searchEvent" @reset="searchEvent">
        <vxe-form-item :title="$t1('服务名')+':'">
          <template v-slot>
            <el-select v-model="serverName" @change="searchEvent">
              <el-option v-for="(serviceId,index) in serviceIds" :key="index" :value="serviceId"
                         :label="serviceId"></el-option>
            </el-select>
          </template>
        </vxe-form-item>
        <vxe-form-item :title="$t1('任务编码')+':'">
          <template v-slot>
            <el-input v-model="formData.taskCode" size="small" clearable/>
          </template>
        </vxe-form-item>
        <vxe-form-item :title="$t1('数据唯一标识')+':'">
          <template v-slot>
            <el-input v-model="formData.sid" size="small" clearable/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="查询时间:">
          <template v-slot>
            <el-date-picker
              v-model="formData.startTime"
              type="datetime"
              placeholder=""
              size="small"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="$baseStartPickerOptions(formData.endTime)"
            ></el-date-picker>
            <span>-</span>
            <el-date-picker
              v-model="formData.endTime"
              type="datetime"
              placeholder=""
              size="small"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="23:59:59"
              :picker-options="$baseEndPickerOptions(formData.startTime)"
            ></el-date-picker>
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
  </vxe-grid>
</template>

<script>
import editView from './edit.vue';

export default {
  name: 'push_data_h:list',
  components: {editView},
  data() {
    return {
      activeName: 'second',
      dataId: 0,
      copyId: 0,
      showEdit: false,
      showAdvancedSearch: false,
      vxeOption: {},
      formData: {},
      advancedFormData: {},
      serviceIds: [],
      serverName: null,
      editServerName: null
    };
  },
  computed: {
    current_prefix() {
      return this.serverName ? `/${this.serverName}` : "";
    }
  },
  mounted() {
    this.getServiceIds(() => {
      this.initTableList();
    })
  },
  methods: {
    searchEvent() {
      if (!this.serverName) {
        this.$baseAlert(this.$t1("请选择服务名"));
        return
      }
      this.$refs['table-m1'].commitProxy('reload');
    },
    resetEvent() {
      if (!this.serverName) {
        this.$baseAlert(this.$t1("请选择服务名"));
        return
      }
      this.formData = {};
      this.$refs['table-m1'].commitProxy('reload');
    },
    openEditDialog(row) {
      this.dataId = row?.id ?? 0;
      let serverName = null;
      if(row){
        if(row.serverName){
          let arr = row.serverName.split(":");
          if(arr.length){
            serverName = arr[0];
          }else{
            serverName = row.serverName;
          }
        }
      }else{
        serverName = this.serverName
      }
      this.editServerName = serverName;
      this.$emit('openEditDialog', this.dataId, this.editServerName);
    },
    initTableList() {
      let that = this;
      let autoLoad = false;
      let serviceIds = this.serviceIds || [];
      if (serviceIds.length) {
        this.serverName = serviceIds[0];
        autoLoad = true;
      }
      let tableOption = {
        vue: this,
        tableRef: 'table-m1',
        tableName: 'bd_push_data_h_list-m1',
        path: ()=>{
          return this.current_prefix + '/push_data_h/listPage';
        },
        param: () => {
          return {
            ...this.formData
          }
        },
        columns: [
          {type: 'checkbox', width: 48, resizable: false, fixed: 'left'},
          {
            title: 'ID',
            field: 'id',
            width: 100,
            fixed: 'left'
          },
          {
            title: '任务编码',
            field: 'taskCode',
            width: 150,
            fixed: 'left'
          },
          {
            title: '数据唯一标识',
            field: 'sid',
            width: 150
          },
          {
            title: '业务方产生时间点',
            field: 'generateDate',
            width: 200,
          },
          {
            title: '结果描述',
            field: 'resultDesc',
            width: 150,
          },
          {
            title: '写历史队列时间',
            field: 'hcreateDate',
            width: 200,
          },
          {
            title: '服务名',
            field: 'serverName',
            width: 200
          },
          {
            title: '业务数据标识',
            field: 'transfer',
            width: 250
          },
          {
            title: '冗余字段1',
            field: 'field1',
            width: 150
          },
          {
            title: '冗余字段2',
            field: 'field2',
            width: 150
          },
          {
            title: '冗余字段3',
            field: 'field3',
            width: 150
          },
          {
            title: '冗余字段4',
            field: 'field4',
            width: 150
          },
          {
            title: '冗余字段5',
            field: 'field5',
            width: 150
          },
          {
            title: '组织编码',
            field: 'callbackCompanyCode',
            width: 150
          },
          {
            title: '备注',
            field: 'remark',
            width: 200
          },
          {
            field: 'createBy',
            title: this.$t1('创建人'),
            width: 150
          },
          {
            field: 'createDate',
            title: this.$t1('创建时间'),
            width: 150
          },
          {
            width: 47,
            fixed: 'right',
            title: '',
            sortable: false,
            slots: {
              default: ({row}) => {
                return [
                  <div>
                    <a
                      href="javascript:void(0);"
                      class="a-link"
                      onclick={() => {
                        this.openEditDialog(row);
                      }}
                    >
                      <el-tooltip enterable={false} effect="dark" content={this.$t1('查看')} placement="top"
                                  popper-class="tooltip-skin">
                        <i class="el-icon-edit"/>
                      </el-tooltip>
                    </a>
                  </div>
                ];
              }
            }
          }
        ],
        config: {
          proxyConfig: {
            autoLoad: autoLoad
          }
        }
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.vxeOption = opts;
      });
    },
    getServiceIds(callback) {
      this.$http({
        url: USER_PREFIX + `/wf_obj_config/wfServiceIds`,
        method: `post`,
        data: {},
        success: res => {
          this.serviceIds = res.objx || [];
          callback && callback()
        }
      });
    }
  }
};
</script>
