<template>
  <a-card :bordered="false" class="task-list">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="任务名称">
              <a-input placeholder="请输入任务名称" v-model="queryParam.jobName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="状态">
              <!-- <a-input placeholder="请输入状态" v-model="queryParam.status"></a-input> -->
              <a-select v-model="queryParam.status" allowClear>
                <a-select-option value="1">可用</a-select-option>
                <a-select-option value="2">任务中</a-select-option>
                <a-select-option value="3">不可用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        @expand="expand"
      >
        <span slot="status" slot-scope="status">{{ status | showStatus }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="start(record)">开始执行</a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <a-modal title="执行设备" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <!-- dataList -->
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="快手账号选择">
          <a-select
            v-decorator="[
              'accountId', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请选择快手账号选择!' }] }
            ]"
          >
            <a-select-option :value="item.id" v-for="item of dataList" :key="item.id">
              {{ item.accountName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="创意名称">
          <a-input
            placeholder="请输入创意名称"
            v-decorator="[
              'creativeName', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请输入创意名称!' }] }
            ]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="发布人名称">
          <a-input
            placeholder="请输入发布人名称"
            v-decorator="[
              'publishName', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请输入发布人名称!' }] }
            ]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="执行次数">
          <a-input-number
            :min="1"
            v-decorator="[
              'num', // 给表单赋值或拉取表单时，该input对应的key
              { rules: [{ required: true, message: '请选择执行次数!' }] }
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 表单区域 -->
    <appiumTask-modal ref="modalForm" @ok="modalFormOk"></appiumTask-modal>
    <appiumTask-item-modal ref="modalItemForm" @ok="modalFormOk"></appiumTask-item-modal>
  </a-card>
</template>

<script>
import AppiumTaskModal from './modules/AppiumTaskModal'
import AppiumTaskItemModal from './modules/AppiumTaskItemModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@/api/manage'
import { transformTozTreeFormat } from '@/utils/util.js'
export default {
  name: 'AppiumTaskList',
  mixins: [JeecgListMixin],
  components: {
    AppiumTaskModal,
    AppiumTaskItemModal
  },
  data() {
    return {
      description: '任务表管理页面',
      // 表头
      visible: false,
      detail: null,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      columns: [
        {
          title: '任务名称',
          align: 'center',
          dataIndex: 'jobName'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/ctop/appiumJob/list',
        delete: '/appium/appiumTask/delete',
        deleteBatch: '/appium/appiumTask/deleteBatch',
        exportXlsUrl: 'appium/appiumTask/exportXls',
        importExcelUrl: 'appium/appiumTask/importExcel'
      },
      run: '/appium/crawler/startJob',
      appiumDevice: '/ctop/bindAccountLogin/list',
      dataList: [],
      value: null,
      form: this.$form.createForm(this),
      jobId: ''
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  filters: {
    showStatus: function(value) {
      var status = {
        1: '可用',
        2: '任务中',
        3: '不可用'
      }
      return status[value]
    }
  },
  methods: {
    lookDetail(item) {
      this.$refs.modalItemForm.edit(item)
      this.$refs.modalItemForm.title = '编辑'
      this.$refs.modalItemForm.disableSubmit = false
    },
    handleOk() {
      var that = this
      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          // 这里做逻辑处理
        } else {
          var params = values
          params.jobId = that.jobId
          console.log(params)
          postAction(this.run, params).then(res => {
            console.log(res)
            that.visible = false
            this.form.resetFields()
          })
        }
      })
    },
    handleCancel() {
      this.value = null
      this.detail = null
      this.visible = false
    },
    start(item) {
      this.visible = true
      this.jobId = item.id
      this.value = null
      var param = {}
      param.pageNo = 1
      param.pageSize = 100
      param.loginType = 'kuaishou'
      getAction(this.appiumDevice, param).then(res => {
        console.log(res.result.records)
        if (res.code == 0) {
          this.dataList = res.result.records
        }
      })
    },
    handleChange(value) {
      //   this.value = value
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  },
  mounted() {
    this.$nextTick(() => {})
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style>
.task-list .ant-table-middle tr.ant-table-expanded-row td > .ant-table-wrapper {
  margin: 0;
}
.task-list tr.ant-table-expanded-row td > .ant-table-wrapper {
  margin: 0;
}
</style>
