<template>

  <el-tabs v-model="activeName"   :stretch="true" @tab-click="handleClick">
    <el-tab-pane label="基础设置" name="TASK_BASIC_SETTINGS_SET">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-weight: 800;">基础设置</span>
        </div>
          <el-form
            label-position="left"
            inline size="small"
            :model="basicSettingsForm"
            ref="basicSettingsForm"
            label-width="200px"
            class="layout_v">

            <el-row>
              <el-col :span="24">
                <div class="layout_h_v_c">
                  <span>任务加急需要额外收取任务金额</span>
                  <el-form-item style="margin: 0 10px;">
                    <el-input v-model="basicSettingsForm.proportionOfExpeditingFee" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
                  </el-form-item>
                  <span>%的加急费</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="layout_h_v_c">
                  <span>任务结束</span>
                  <el-form-item style="margin: 0 10px;">
                    <el-input v-model="basicSettingsForm.automaticCompletionTime" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
                  </el-form-item>
                  <span>分钟后，若发布者未确认任务完成，则系统自动确认任务完成</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="layout_h_v_c">
                  <span>非加急任务，任务员可以在任务开始前</span>
                  <el-form-item style="margin: 0 10px;">
                    <el-input v-model="basicSettingsForm.cancellableTime" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
                  </el-form-item>
                  <span>分钟前取消任务</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="layout_h_v_c">
                  <span>任务员任务完成率低于</span>
                  <el-form-item style="margin: 0 10px;">
                    <el-input v-model="basicSettingsForm.taskCompletionRate" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
                  </el-form-item>
                  <span>% ，在</span>
                  <el-form-item style="margin: 0 10px;">
                    <el-input v-model="basicSettingsForm.unableToReceiveTaskTime" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
                  </el-form-item>
                  <span>小时内不能接收新任务</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="layout_h_v_c">
                  <span>任务开始时间前</span>
                  <el-form-item style="margin: 0 10px;">
                    <el-input v-model="basicSettingsForm.becomeAnUrgentTaskTime" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
                  </el-form-item>
                  <span>分钟，若参与任务人数不足，则将任务做为紧急任务</span>
                </div>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button class="self_center" type="primary" :loading="saving" @click="submitForm1">保存</el-button>
            </el-form-item>
          </el-form>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="任务金额配置" name="TASK_AMOUNT_SET">配置管理</el-tab-pane>
    <el-tab-pane label="发言内容模板" name="SPEECH_CONTENT_TEMPLATE_SET">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-weight: 800;">发言内容模板</span>
        </div>
        <!--添加模板-->
        <el-form id="speechContentTemplateForm" ref="speechContentTemplateForm" :model="speechContentTemplateForm" :rules="speechContentTemplateRules" label-width="80px"  class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="模板内容" prop="content">
                  <el-input v-model="speechContentTemplateForm.content"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="排序" prop="sort" >
                  <el-input v-model="speechContentTemplateForm.sort" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item>
                  <el-button type="primary" @click="addTemplate('speechContentTemplateForm')">确认添加</el-button>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!--编辑模板-->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
          <el-form id="speechContentTemplateUpdateForm" ref="speechContentTemplateUpdateForm" :model="speechContentTemplateUpdateForm" :rules="speechContentTemplateRules" label-width="80px"  class="demo-ruleForm">
            <el-row>
              <el-col >
                <div class="grid-content bg-purple">
                  <el-form-item label="模板内容" prop="content">
                    <el-input v-model="speechContentTemplateUpdateForm.content"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col >
                <div class="grid-content bg-purple">
                  <el-form-item label="排序" prop="sort" >
                    <el-input v-model="speechContentTemplateUpdateForm.sort" :min="1" :max="99999" type="number" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateTemplate('speechContentTemplateUpdateForm')">确 定</el-button>
          </span>
        </el-dialog>
        <!--模板列表-->
        <el-row :gutter="20">
          <el-col >
            <div class="grid-content bg-purple">
              <el-table
                :data="speechContentTemplateTab"
                border
                style="width: 100%">
                <el-table-column
                  align="center"
                  prop="content"
                  label="模板内容" >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="sort"
                  label="排序">
                </el-table-column>
                <el-table-column
                  align="center"
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button @click="editClick(scope.row,scope.$index)"  type="text" size="small">编辑</el-button>
                    <el-button @click="deleteClick(scope.row,scope.$index)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="10">
            <div class="grid-content bg-purple">
              <el-button class="self_center" type="primary" :loading="saving" @click="submitForm3">保存</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-tab-pane>
  </el-tabs>



</template>



<script>

  import { getSystemSet, configSystemSet } from '@/api/systemSet/systemSet.js'
  import { ZmMixin } from '@/mixins/ZmMixin.js'

  export default {
    mixins: [ZmMixin],
    data() {
      const checkSort = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('排序不能为空'));
        }
        value=value*1
        if (!Number.isInteger(value)) {
          callback(new Error('请输入整数'));
        } else {
          if (value <= 0) {
            callback(new Error('必须大于0'));
          } else {
            callback();
          }
        }
      };
      return {
        activeName: 'TASK_BASIC_SETTINGS_SET',
        loading: false,
        saving: false,
        dialogVisible: false,
        index: -1,
        basicSettingsForm: {
          proportionOfExpeditingFee: 0,
          automaticCompletionTime: 0,
          cancellableTime: 0,
          taskCompletionRate: 0,
          unableToReceiveTaskTime: 0,
          becomeAnUrgentTaskTime: 0,
        },
        speechContentTemplateForm:  {},
        speechContentTemplateUpdateForm:  {},
        speechContentTemplateRules: {
          content: [
            { required: true, message: '请输入模板内容', trigger: 'blur' },
          ],
          sort: [
            { validator: checkSort, trigger: 'blur'  }
          ]
        },
        speechContentTemplateTab: []
      }
    },
    created() {
      this.load()
    },
    methods: {
      handleClick(tab, event) {
        this.load();
      },
      load() {
        this.loading = true
        getSystemSet({key: this.activeName})
        .then(r => {
          this.loading = false
          let z = this.zmRes(r)
          if(z) {
            if( this.activeName=="TASK_BASIC_SETTINGS_SET"){
              this.basicSettingsForm = z
            }else if( this.activeName=="SPEECH_CONTENT_TEMPLATE_SET"){
              this.speechContentTemplateTab=z
            }else{

            }

          }
        })
        .catch(e => {
          this.loading = false
        })
      },
      editClick(row,index){
        this.index = index
        this.speechContentTemplateUpdateForm={...row}
        this.dialogVisible = true
      },
      deleteClick(row,index){
        this.$confirm('是否删除次模板?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('删除成功!',index)
          let tab = this.speechContentTemplateTab;
          tab.splice(index,1)
          this.speechContentTemplateTab=tab;
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
        });
      },
      addTemplate(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let tab = this.speechContentTemplateTab;
            let form = this.speechContentTemplateForm;
            form.sort=form.sort*1;
            tab.push(form)
            tab = tab.sort(function(a,b){
              let x = a["sort"];
              let y = b["sort"];
              return((x<y)?-1:((x>y)?1:0));
            })
            this.speechContentTemplateForm= {};
            this.speechContentTemplateTab=tab;
          } else {
            return false;
          }
        });
      },
      updateTemplate(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let tab = this.speechContentTemplateTab;
            let form = this.speechContentTemplateUpdateForm;
            form.sort=form.sort*1;
            this.$set(tab,this.index,form)
            tab = tab.sort(function(a,b){
              let x = a["sort"];
              let y = b["sort"];
              return((x<y)?-1:((x>y)?1:0));
            })
            this.speechContentTemplateUpdateForm= {};
            this.speechContentTemplateTab=tab;
            this.dialogVisible = false
          } else {
            return false;
          }
        });
      },
      submitForm1() {
        this.saving = true
        configSystemSet({
          key: this.activeName,
          data: JSON.stringify(this.basicSettingsForm)
        })
        .then(r => {
          this.saving = false
          this.success("保存成功！")
        })
        .catch(e => {
          this.saving = false
        })
      },
      submitForm3() {
        this.saving = true
        configSystemSet({
          key: this.activeName,
          data: JSON.stringify(this.speechContentTemplateTab)
        })
        .then(r => {
          this.saving = false
          this.success("保存成功！")
        })
        .catch(e => {
          this.saving = false
        })
      },

    }
  }
</script>

