<template>
  <div class="tasklist">
    
    <!-- 执行列表 -->
       <div class="moduler">
         <span>任务执行状态：</span>
          <a-select  style="width: 200px" v-model="exeState" @change="exeStateChange" placeholder="执行状态">
              <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>    
          
      </div>

      <div class="moduler">
        <!--  :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}" -->
        <div class="tableOpt">
          <a-button type='primary' @click="addTask">新增任务</a-button>
        </div>
          <div class="table">
                <a-table
                    :columns="columns"
                    :data-source="tableData"                 
                    bordered
                    :pagination="ipagination"
                    :loading="loading"
                    @change="sort"
                    size='middle'
                >

                    <span slot="options" slot-scope="text,record">
                        <a href="javascript:;" style="margin-right:10px" @click="editItem(record)">编辑</a>
                        <a-popconfirm
                          title="确定删除该任务?"
                          ok-text="确定"
                          cancel-text="取消"
                          @confirm="deleteItem(record)"
                         
                        >
                          <a href="javascript:;">删除</a>
                        </a-popconfirm>
                        
                    </span>
                   
                     <span slot="exeState" slot-scope="text,record">
                         <a-spin :spinning="record.spin" size="small" >
                            <div class="spin-content">
                                <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
                            </div>
                        </a-spin>
                        <!-- <a-switch size="default" :checked=text  @change="switchChange(text,record)"/> -->
                    </span>
                    <span slot="mediaType" slot-scope='text'>
                        <span v-if="text==1">头条</span>
                        <span v-if="text==2">快手</span>
                    </span>
                </a-table>
            </div>
      </div>
     

      <!-- 新建任务的模态框 -->
      <a-modal  v-model="visible" :title="modalTitle" @ok="handleOk" width='1200px' :maskClosable='false' :keyboard='false' :confirm-loading="confirmLoading">
        <div class="newTask">
          <a-form :form="form">
          <div class="moduler">          
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">名称</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-item > 
                  <a-input  v-decorator="['name', {rules:validationRules.name}]" />
                  </a-form-item>  
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">描述</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-item > 
                  <a-input  v-decorator="['comment', {rules:validationRules.name}]" />
                  </a-form-item>  
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">媒体类型</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-item > 
                 <a-radio-group v-decorator="['mediaType', { initialValue:1}]">
                  <a-radio-button :value="1">头条</a-radio-button>
                  <a-radio-button :value="2">快手</a-radio-button>
                  </a-radio-group>
                  </a-form-item>  
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">任务组名称</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-item > 
                  <a-input  v-decorator="['jobName', {rules:validationRules.name}]" />
                   </a-form-item>
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">包名</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-item > 
                  <a-input  v-decorator="['packageName', {rules:validationRules.name}]" />
                  </a-form-item>
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">邮箱</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-item > 
                  <a-input  v-decorator="['mail', {rules:validationRules.name}]" />
                  </a-form-item>
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">API_Name</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-item > 
                  <a-input  v-decorator="['apiName', {rules:validationRules.name}]" />
                  </a-form-item>
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">执行状态</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                   <a-form-item > 
                  <a-radio-group v-decorator="['exeState', { initialValue:1 }]">
                    <a-radio-button :value="1">开启</a-radio-button>
                    <a-radio-button :value="0">暂停</a-radio-button>
                  </a-radio-group>
                  </a-form-item>
                </div>
              </div>
              <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                  <div class="text-item">脚本</div>
                  <div class="required-item"></div>
                </div>
                <div class="input-item">
                  <a-form-item > 
                    <a-textarea
                    v-decorator="['script', {rules:validationRules.name}]"
                    placeholder="请输入执行代码"
                    :autoSize="{ minRows: 10}"
                  />
                   </a-form-item>
                </div>
              </div>
          </div>
          </a-form>    
        </div>
      </a-modal>
  </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
import { JeecgListMixin } from '@/mixins/ipagination'
import qs from 'qs'
const columns = [
  {
    title: '任务状态',
    dataIndex: 'exeState',
    key: 'exeState',
    align: 'center',
    scopedSlots: { customRender: 'exeState' }
  },
  {
    title: '名字',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: 'API_Name',
    dataIndex: 'apiName',
    key: 'apiName',
    align: 'center',
    scopedSlots: { customRender: 'apiName' }
  },
    // {
    //   title: '任务id',
    //   dataIndex: 'id',
    //   key: 'id',
    //   align: 'center',
    // },
  {
    title: '包名',
    dataIndex: 'packageName',
    key: 'packageName',
    align: 'center',
  },
  
  
  {
    title: '邮箱',
    dataIndex: 'mail',
    key: 'mail',
    align: 'center',
    
  },
  {
    title: '媒体类型',
    dataIndex: 'mediaType',
    key: 'mediaType',
    align: 'center',
    scopedSlots: { customRender: 'mediaType' }
  },
  {
    title: '任务组名称',
    dataIndex: 'jobName',
    key: 'jobName',
    align: 'center',
    scopedSlots: { customRender: 'jobName' }
  },
 
  {
    title: '操作',
    dataIndex: 'options',
    key: 'options',
    align: 'center',
    scopedSlots: { customRender: 'options' }
  },
];
  export default {
    mixins: [JeecgListMixin],
    data() {
      return {
        form: this.$form.createForm(this),
        exeState:undefined,
        columns,
        tableData:[],
        loading:false,
        visible:false,
        confirmLoading: false,
        modalTitle:'',
        validationRules: {
          url: [   
            {          
              required: true,
              validator: this.validateURL,
            },
          ],
          name:[{
            required: true,
             message:'此字段必须填写',
          }],
          bid:[{
            required: true,
            message:'出价信息必须填写',
            // validator: this.validateBid,
          }],
          roi:[{
            required: true,
            message:'ROI系数必须填写',
            // validator: this.validateBid,
          }],
        },
        currentRecord:{},
      }
    },
    methods: {
      // 编辑
      editItem(record){
        console.log(record)
        this.currentRecord=record
        let recordData=JSON.parse(JSON.stringify(record))
        this.modalTitle='编辑任务'
         this.visible = true;
         getAction('/ctop/checkTaskList/queryById',recordData).then(res=>{
           console.log(res)
           if(res.success){
              res.result.exeState=res.result.exeState?1:0;
              this.form.setFieldsValue({
                ...res.result
              })
           }
         })
      },
      // shanchu
      deleteItem(record){
        postAction('/ctop/checkTaskList/delete',qs.stringify({
          id:record.id
        })).then(res=>{
          console.log(res)
          if(res.success){
            this.$message.success(res.message);
            this.tableHttp()
          }
        })
      },
      // 任务的执行状态
      exeStateChange(e){
        console.log(e);
        this.tableHttp();
      },
      //点击分页
      sort(pagination, filters, sorter, { currentDataSource }){
          
          this.ipagination.current=pagination.current;
          // this.search()
          this.tableHttp()
      },
      // 任务状态改变
      switchChange(text,record){
        console.log(text,record);
        record.spin=true;
        let recordData=JSON.parse(JSON.stringify(record))
        recordData.exeState=!text;
        postAction('/ctop/checkTaskList/edit',recordData).then(res=>{
          console.log(res);
          record.spin=false;
          if(res.success){
            this.$message.success(res.message)
            this.tableHttp()
          }else{
            this.$message.error(res.message)
          }
        })
      },

      addTask(){
         this.visible = true;
         this.modalTitle='新增任务';
         this.form=this.$form.createForm(this)
      },
      handleOk(e) {
        // console.log(e,'---------');
        this.confirmLoading = true;
        this.form.validateFields((err, values) => {
            if (!err) {
              
              console.log('Received values of form: ', values)
              if(this.modalTitle=='新增任务'){
                postAction('/ctop/checkTaskList/add', {                 
                  ...values,
                }).then((res) => {
                  console.log(res)
                  this.visible = false;
                   this.confirmLoading = false;
                  if (res.success) {                   
                    this.$message.success('创建成功');
                    this.tableHttp();
                  } else {    
                    this.$message.error('创建失败')  

                  }
                })
              }else{
                postAction('/ctop/checkTaskList/edit', { 
                  id:this.currentRecord.id,                
                  ...values,
                }).then((res) => {
                  console.log(res)
                  this.visible = false;
                   this.confirmLoading = false;
                  if (res.success) {                   
                    this.$message.success('修改成功')
                     this.tableHttp();
                  } else {    
                    this.$message.error('修改失败')               
                  }
                })
              }
                
            } else {
                 this.confirmLoading = false;
              // console.log(err)
              this.$message.error('请正确填写必填项目')
            }
          })


      },
      // 获取展示列的table
      tableHttp(){
        this.loading=true;
        getAction(`/ctop/checkTaskList/list?pageNo=${this.ipagination.current}`,{
  
          exeState:this.exeState
        }).then(res=>{
          console.log(res);
          this.loading=false
          if(res.success){
            this.tableData=res.result.records.map(item=>{
                return {
                    ...item,
                    spin:false
                }
            });
            this.ipagination.total=res.result.total
          }
          
        })
      },
    },
    mounted() {
      this.tableHttp();
    },
  }
</script>

<style lang="scss" scoped>
.tasklist{
  font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  color: #333;
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  .moduler {
    background: #fff;
    margin-bottom: 16px;
    position: relative;
    padding: 32px 24px 48px 32px;
    border-radius: 4px;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
    .moduler-title {
      display: flex;
      align-items: center;
      font-size: 22px;
      margin-bottom: 20px;
    }
    .row-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
    }
    .row-item:last-of-type {
      margin-bottom: 0;
    }
    .row-item .hint-item {
      width: 24px;
      min-width: 24px;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 5px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 7px;
      width: 80px;
      min-width: 80px;
      .text-item {
        font-size: 14px;
        width: 60px;
      }
    }
    .row-item .required-item {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background: #f45858;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .row-item .input-item {
      min-width: 480px;
      position: relative;
      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }
    }
  }
  .tableOpt{
    margin-bottom: 20px;
  }
}

</style>
<style lang="scss">
  .newTask{
    .moduler {
    background: #fff;
    margin-bottom: 16px;
    position: relative;
    padding: 32px 24px 48px 32px;
    border-radius: 4px;
    // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
    .moduler-title {
      display: flex;
      align-items: center;
      font-size: 22px;
      margin-bottom: 20px;
    }
    .row-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
    }
    .row-item:last-of-type {
      margin-bottom: 0;
    }
    .row-item .hint-item {
      width: 24px;
      min-width: 24px;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 5px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 7px;
      width: 120px;
      min-width: 80px;
      .text-item {
        font-size: 14px;
        width: 80px;
      }
    }
    .row-item .required-item {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background: #f45858;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .row-item .input-item {
      min-width: 950px;
      position: relative;
      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }
    }
  }
  
    .ant-form-item {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      -webkit-font-feature-settings: 'tnum';
      font-feature-settings: 'tnum';
      vertical-align: top;
    }
  }
</style>