 <template>
  <div>
    <div class="drawer_body_box">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="90px">
        <el-form-item label="策略名称" prop="name">
          <el-input v-model="temp.name" clearable placeholder="请输入策略名称" />
        </el-form-item>
        <el-form-item label="客户数据" prop="name">
          <el-button size="small" @click="downloadTemplate">下载模板</el-button>
          <i class="el-icon-upload" @click="importData"></i>
          <span>请按照模板格式填写数据</span>
        </el-form-item>
        <el-form-item label="子账号" prop="account">
          <el-select clearable v-model="temp.account" class="filter-item" placeholder="请选择子账号">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="主叫号码" prop="phone">
          <el-select clearable v-model="temp.phone" class="filter-item" placeholder="请选择主叫号码">
            <el-option
              v-for="item in sourceOptions"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="外呼日期" prop="dates">
          <el-radio v-model="temp.dates" label="1">每天</el-radio>
          <el-radio v-model="temp.dates" label="2">日期前一天和当天</el-radio>
        </el-form-item>
        <el-form-item label="外呼频率" prop="rate">
          <el-radio disabled v-model="temp.rate" label="2">一天两次</el-radio>
          <el-radio disabled v-model="temp.rate" label="1">一天一次</el-radio>
        </el-form-item>
        <el-form-item label="呼叫设置" prop="setdate1">
          <el-time-picker
            v-model="temp.setdate1"
            :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
            placeholder="请选择呼叫时间点1"
          ></el-time-picker>
        </el-form-item>
        <el-form-item v-if="showDate" label=" " prop="setdate2">
          <el-time-picker
            v-model="temp.setdate2"
            :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
            placeholder="请选择呼叫时间点2"
          ></el-time-picker>
        </el-form-item>
        <el-form-item label=" " prop="process">
          <div v-if="onlyOneProcess">
            <el-select
              v-model="temp.process"
              multiple
              :multiple-limit="1"
              placeholder="请选择话术流程"
              ref="processSelect"
              @change="processChange"
            >
              <el-option
                v-for="item in processOpts"
                :key="item.value"
                :label="item.key"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div v-else>
            <el-select v-model="temp.process" multiple :multiple-limit="2" placeholder="请选择话术流程">
              <el-option
                v-for="item in processOpts"
                :key="item.value"
                :label="item.key"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="temp.status"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer__footer text-rt">
      <el-button type="primary" @click="saveData(1)">确定</el-button>
      <el-button @click="saveData(0)">取消</el-button>
    </div>
    <el-drawer
      title="导入数据"
      :visible.sync="importVisible"
      :append-to-body="true"
      :destroy-on-close="true"
      :wrapperClosable="false"
      @close="importCallback(0)"
      direction="rtl"
    >
      <ImprtData
        v-if="importVisible"
        :temp="temp"
        :dialogStatus="dialogStatus"
        @save="importCallback"
      ></ImprtData>
    </el-drawer>
  </div>
</template>

<script>
// import { addCodes, editCodes } from '@/api/article'
import ImprtData from './import-data'

export default {
  name: 'AddOrEdit',
  components: { ImprtData },
  props: ['dialogStatus', 'temp'],
  data() {
    return {
      showDate: false,
      importVisible: false,
      onlyOneProcess: false,
      processOpts: [
        { value: 1, key: '111111111' },
        { value: 2, key: '2222222' },
        { value: 3, key: '3333333' }
      ],
      sourceOptions: [
        { value: 'Git', key: 'Git' },
        { value: 'SVN', key: 'SVN' }
      ],
      typeOptions: [
        { value: 1, key: 'Web端' },
        { value: 2, key: '后台代码' }
      ],
      rules: {
        name: [
          {
            required: true,
            message: '策略名称必填且不能超过64位字符',
            trigger: 'blur',
            max: 64
          }
        ],
        files: [
          {
            required: true,
            message: '源码类型必填',
            trigger: 'blur'
          }
        ],
        account: [
          {
            required: true,
            message: '子账号必选',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '主叫号码必选',
            trigger: 'blur'
          }
        ],
        dates: [
          {
            required: true,
            message: '外呼日期必选',
            trigger: 'blur'
          }
        ],
        rate: [
          {
            required: true,
            message: '外呼频率必选',
            trigger: 'blur'
          }
        ],
        setdate1: [
          {
            required: true,
            message: '呼叫设置-外呼时间点1必选',
            trigger: 'blur'
          }
        ],
        setdate2: [
          {
            required: true,
            message: '呼叫设置-外呼时间点2必选',
            trigger: 'blur'
          }
        ],
        process: [
          {
            required: true,
            message: '呼叫设置-话术流程必选',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '状态必选',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    'temp.dates': function(nv) {
      console.log(nv)
      this.temp.process = null
      if (nv === '1') {
        this.temp.rate = '2'
        this.showDate = true
        this.onlyOneProcess = true
      } else if (nv === '2') {
        this.temp.rate = '1'
        this.showDate = false
        this.onlyOneProcess = false
      }
    },
    'temp.rate': function(nv) {
      console.log(nv)
    }
  },
  created() {},
  methods: {
    processChange(nv) {
      if (nv.length) {
        this.$refs.processSelect.blur()
      }
    },
    importData(row) {
      this.importVisible = true
    },
    importCallback(status) {
      this.importVisible = false
    },
    downloadTemplate() {},
    saveData(status) {
      console.log(this.temp)
      // 0 cancel/close 1 save  dialogStatus/create/update
      if (status) {
        this.$refs['dataForm'].validate(valid => {
          // if (valid) {
          //   const tempData = this.$publicTools.deepClone(this.temp)
          //   const loading = this.$loading({
          //     lock: true,
          //     text: 'Loading',
          //     spinner: 'el-icon-loading',
          //     background: 'rgba(0, 0, 0, 0.7)'
          //   })
          //   if (this.dialogStatus === 'update') {
          //     editCodes(tempData)
          //       .then(res => {
          //         loading.close()
          //         this.dialogFormVisible = false
          //         this.$emit('save', status)
          //         this.$message({
          //           message:
          //             Object.prototype.toString.call(res) ===
          //               '[object Object]' && res.info
          //               ? res.info
          //               : 'update Successfully',
          //           type: 'success'
          //         })
          //       })
          //       .catch(() => {
          //         loading.close()
          //       })
          //   } else if (this.dialogStatus === 'create') {
          //     addCodes(tempData)
          //       .then(res => {
          //         loading.close()
          //         this.dialogFormVisible = false
          //         this.$emit('save', status)
          //         this.$message({
          //           message:
          //             Object.prototype.toString.call(res) ===
          //               '[object Object]' && res.info
          //               ? res.info
          //               : 'create Successfully',
          //           type: 'success'
          //         })
          //       })
          //       .catch(() => {
          //         loading.close()
          //       })
          //   }
          // }
        })
      } else {
        this.$emit('save')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-upload {
  color: mediumblue;
  font-size: 24px;
  vertical-align: middle;
}
.el-date-editor.el-input {
  width: 100%;
}
</style>
