<template>
  <div class="detail-wrap">
    <el-form ref="editForm" :model="exportTemplate">
      <div class="d-header clearfix">
        <div class="fl">
          <i class="el-icon-info"/>
          {{ dataId ? $t1('查看输出模板') : $t1('新增输出模板') }}
        </div>
        <div class="fr">
          <el-button type="primary" plain class="button-sty" @click="$baseReload()" icon="el-icon-refresh-right">
            {{ $t1('重置') }}
          </el-button>
          <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData">{{ $t1('保存') }}
          </el-button>

        </div>
      </div>
      <div class="d-cont">
        <div class="d-item">
          <div class="title first"><b>{{ $t1('基本信息') }}</b></div>
          <table class="table-detail">
            <tbody>
            <tr>
              <th>
                <em class="f-red">*</em>
                {{ $t1('输出类型') }}
              </th>
              <td colspan="7">
                <el-form-item prop="etType" :rules="[{ required: true, trigger: 'blur' }]" v-if="!dataId">
                  <el-radio-group v-model="exportTemplate.etType">
                    <el-radio :label="0">{{ etTypeMap[0] }}</el-radio>
                    <el-radio :label="1">{{ etTypeMap[1] }}</el-radio>
                    <el-radio :label="2">{{ etTypeMap[2] }}</el-radio>
                    <el-radio :label="3">{{ etTypeMap[3] }}</el-radio>
                    <el-radio :label="4">{{ etTypeMap[4] }}</el-radio>
                    <el-radio :label="5">{{ etTypeMap[5] }}</el-radio>
                    <el-radio :label="6">{{ etTypeMap[6] }}</el-radio>
                    <el-radio :label="7">{{ etTypeMap[7] }}</el-radio>
                    <el-radio :label="8">{{ etTypeMap[8] }}</el-radio>
                    <el-radio :label="9">{{ etTypeMap[9] }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <template v-else>
                  {{ etTypeMap[exportTemplate.etType] }}
                </template>
              </td>
            </tr>
            <tr>
              <th>
                <em class="f-red">*</em>
                {{ $t1('输出模板名称') }}
              </th>
              <td>
                <el-form-item prop="etName" :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input type="text" autocomplete="off" v-model="exportTemplate.etName" clearable/>
                </el-form-item>
              </td>
              <th>
                <em class="f-red">*</em>
                {{ $t1('输出模板编码') }}
              </th>
              <td>
                <el-form-item prop="etCode" :rules="[{ required: true, trigger: 'blur' }]" v-if="!dataId">
                  <el-input type="text" autocomplete="off" v-model="exportTemplate.etCode" clearable/>
                </el-form-item>
                <template v-else>
                  {{ exportTemplate.etCode }}
                </template>
              </td>
              <th>
                <em class="f-red">*</em>
                {{ $t1('组织编码') }}
              </th>
              <td>
                <el-form-item prop="etCompanyCode" :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input type="text" autocomplete="off" v-model="exportTemplate.etCompanyCode" clearable/>
                </el-form-item>
              </td>
              <th>
                {{ $t1('是否启用') }}
              </th>
              <td>
                <el-form-item prop="enabled" :rules="[{ required: false, trigger: 'blur' }]">
                  <el-radio-group v-model="exportTemplate.enabled">
                    <el-radio :label="true">{{ $t1('启用') }}</el-radio>
                    <el-radio :label="false">{{ $t1('禁用') }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>{{ $t1('备注') }}</th>
              <td colspan="7">
                <el-input type="textarea" :rows="2" :placeholder="$t1('请输入内容')" size="small"
                          v-model="exportTemplate.remark"
                          clearable></el-input>
              </td>
            </tr>
            <tr v-show="printTypes.includes(exportTemplate.etType)">
              <th>
                <em class="f-red">*</em>
                {{ $t1('模板数据') }}
              </th>
              <td colspan="7">
                <el-form-item prop="etText"
                              :rules="[{ required: printTypes.includes(exportTemplate.etType), trigger: 'blur' }]">
                  <code-editor mode="json" :readonly="!1" v-model="exportTemplate.etText" ref="etText" height="115px"
                               style="width:718px"
                               v-if="showCodeEditor"></code-editor>
                  <el-button type="danger" class="button-sty vertical" icon="el-icon-edit"
                             @click="showHiprintDesignDialog = true"
                             v-if="exportTemplate.etType==3">{{ $t1('模板设计') }}
                  </el-button>
                </el-form-item>
              </td>
            </tr>
            <tr
              v-show="exportTemplate.etType==0 || exportTemplate.etType==1 || exportTemplate.etType==4|| exportTemplate.etType==5">
              <th>
                <em class="f-red">*</em>
                {{ $t1('模板文件') }}
              </th>
              <td colspan="3">
                <el-form-item
                  prop="etUrl"
                  :rules="[{
                    required: exportTemplate.etType==0 || exportTemplate.etType==1 || exportTemplate.etType==4 || exportTemplate.etType==5,
                    trigger: 'blur'
                  }]">
                  <baseUpload
                    :limit="1"
                    :accept="accept"
                    multi="false"
                    :file.sync="exportTemplate.etUrl"
                    dataType="url"
                  ></baseUpload>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>
                <em class="f-red">*</em>
                {{ $t1('获取数据脚本') }}<br/>
                <scriptDescriptionButton path="static/readme/ExportTemplate.txt"></scriptDescriptionButton>
                <scriptTestButton :script.sync="exportTemplate.script"></scriptTestButton>
              </th>
              <td colspan="7">
                <el-form-item prop="script" :rules="[{ required: true, trigger: 'blur' }]">
                  <code-editor mode="java" :readonly="!1" v-model="exportTemplate.script"
                               v-if="showCodeEditor"></code-editor>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>{{ $t1('创建人') }}</th>
              <td>{{ exportTemplate.createBy }}</td>
              <th>{{ $t1('创建时间') }}</th>
              <td>{{ exportTemplate.createDate }}</td>
              <th>{{ $t1('更新人') }}</th>
              <td>{{ exportTemplate.modifyBy }}</td>
              <th>{{ $t1('更新时间') }}</th>
              <td>{{ exportTemplate.modifyDate }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </el-form>
    <hiprintDesignDialog v-if="showHiprintDesignDialog" :visiable.sync="showHiprintDesignDialog"
                         :printJsonStr.sync="exportTemplate.etText"
                         @confirm="confirmHiprintDesignDialog"></hiprintDesignDialog>
  </div>
</template>

<script>
import hiprintDesignDialog from '@base/components/hiprint/view/design/dialog'

export default {
  name: 'exportTemplateEdit',
  props: {
    _dataId: [String, Number]
  },
  components: {
    hiprintDesignDialog
  },
  data() {
    return {
      isEdit: false,
      tabIndex: 'first',
      dataId: '',
      exportTemplate: {enabled: true, etType: null},
      showCodeEditor: false,
      showHiprintDesignDialog: false,
      printTypes: [2, 3, 6, 7, 8, 9],
      etTypeMap: {
        0: this.$t1('输出excel格式文件，使用excel格式模版'),
        1: this.$t1('输出pdf格式文件，使用excel格式模版'),
        2: this.$t1('菜鸟打印'),
        3: this.$t1('网页打印'),
        4: this.$t1('上传存储自定义文件，使用自定义格式模版'),
        5: this.$t1('输出自定义文件，使用自定义格式模版'),
        6: this.$t1('京东打印'),
        7: this.$t1('拼多多打印'),
        8: this.$t1('唯品会打印'),
        9: this.$t1('小红书打印')
      }
    };
  },
  computed: {
    accept() {
      let etType = this.exportTemplate.etType;
      if (etType === 4 || etType === 5) {
        //excel,paf,word
        return 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,' +
          'application/pdf,' +
          'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document';
      } else {
        //excel
        return 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      }
    }
  },
  created() {
    if (this._dataId && !isNaN(this._dataId)) this.dataId = this._dataId;
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      if (this.dataId && !isNaN(this.dataId)) {
        this.isEdit = true;
        this.$http({
          url: USER_PREFIX + `/export_template/get`,
          method: `post`,
          data: {
            id: this.dataId
          },
          isLoading: true,
          modalStrictly: true,
          success: res => {
            this.exportTemplate = res.objx || {};
            this.showCodeEditor = true;
          }
        });
      } else {
        this.exportTemplate.etType = 0;
        this.showCodeEditor = true;
      }
    },
    saveData() {
      this.$refs.editForm.$baseValidate(valid => {
        if (valid) {
          this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
            var url = USER_PREFIX + (this.isEdit ? `/export_template/update` : `/export_template/save`);
            this.$http({
              url: url,
              method: `post`,
              data: this.exportTemplate,
              isLoading: true,
              success: res => {
                this.$message({
                  message: res.content,
                  type: 'success',
                  duration: 500,
                  onClose: t => {
                    if (this.isEdit) {
                      this.$baseReload();
                    } else {
                      this.$baseReload({
                        updateParam: {
                          _dataId: res.objx
                        }
                      });
                    }
                  }
                });
              }
            });
          });
        }
      });
    },
    confirmHiprintDesignDialog(val) {
      this.$refs.etText.setValue(val);
    }
  }
};
</script>
