<template>
  <div class="detail-wrap">
    <el-form ref="editForm" :model="billSetting">
      <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>
          <el-button type="primary" class="button-sty" icon="iconfont icon-preview" @click="openPreview">{{
              $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>
                <el-form-item prop="name" :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input type="text" autocomplete="off" v-model="billSetting.name" clearable/>
                </el-form-item>
              </td>
              <th>{{ $t1('编号') }}</th>
              <td>
                <el-form-item v-if="!dataId" prop="code" :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input type="text" autocomplete="off" v-model="billSetting.code" clearable/>
                </el-form-item>
                <template v-else>
                  {{ billSetting.code }}
                </template>
              </td>
              <th>
                <em class="f-red">*</em>
                {{ $t1('是否启用') }}
              </th>
              <td>
                <el-form-item prop="enabled" :rules="[{ required: true, trigger: 'blur' }]">
                  <el-radio-group v-model="billSetting.enabled">
                    <el-radio :label="true">{{ $t1('启用') }}</el-radio>
                    <el-radio :label="false">{{ $t1('禁用') }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
              <th>
                {{ $t1('数据类型') }}
              </th>
              <td>
                <el-form-item prop="dataTypeName" :rules="[{ required: false, trigger: ['blur', 'change'] }]">
                  <el-input
                    class="search-input"
                    max="200"
                    v-model="billSetting.dataTypeName"
                    v-el-readonly
                    clearable
                    @clear="billSetting.dataTypeCode=null"
                  >
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="showDataTypeDialog = true"></i>
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>
                <em class="f-red">*</em>
                {{ $t1('全部组织使用') }}
              </th>
              <td>
                <el-form-item prop="allCompany" :rules="[{ required: true, trigger: 'blur' }]">
                  <el-radio-group v-model="billSetting.allCompany" @change="()=>{billSetting.exeCompanyCode=null}">
                    <el-radio :label="true">{{ $t1('是') }}</el-radio>
                    <el-radio :label="false">{{ $t1('否') }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
              <th>
                <em class="f-red" v-if="!billSetting.allCompany">*</em>
                {{ $t1('执行组织编码') }}
              </th>
              <td>
                <el-form-item prop="exeCompanyCode" :rules="[{ required: !billSetting.allCompany, trigger: 'blur' }]">
                  <el-input type="text" autocomplete="off" v-model="billSetting.exeCompanyCode" clearable
                            :disabled="billSetting.allCompany"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>{{ $t1('备注') }}</th>
              <td colspan="5">
                <el-input type="textarea" :rows="2" :placeholder="$t1('请输入内容')" size="small"
                          v-model="billSetting.remark"
                          clearable></el-input>
              </td>
            </tr>
            <tr>
              <th>
                <em class="f-red">*</em>
                {{ $t1('脚本') }}
              </th>
              <td colspan="7">
                <el-form-item prop="data" :rules="[{ required: true, trigger: 'blur' }]">
                  <code-editor mode="json" :readonly="!1" v-model="billSetting.data"
                               v-if="showCodeEditor"></code-editor>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="8">
                <span class="tips_1">{{
                    $t1('移动端地址：/#/outLinkView?url=/user/bill_setting/h5_view&wfEnabled=false&code=xx&dataId=xx&access_token=xx ( url内容固定/user/bill_setting/h5_view，wfEnabled 是否放出流程操作按钮,code为编号，dataId为单据ID,access_token为访问token )')
                  }}</span>
              </td>
            </tr>
            <tr>
              <th>{{ $t1('创建人') }}</th>
              <td>{{ billSetting.createBy }}</td>
              <th>{{ $t1('创建时间') }}</th>
              <td>{{ billSetting.createDate }}</td>
              <th>{{ $t1('更新人') }}</th>
              <td>{{ billSetting.modifyBy }}</td>
              <th>{{ $t1('更新时间') }}</th>
              <td>{{ billSetting.modifyDate }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </el-form>
    <previewDialog ref="previewDialog"></previewDialog>
    <dataTypeDialog v-if="showDataTypeDialog" :visiable.sync="showDataTypeDialog" multi="false"
                    @confirm="confirmDataType" :dataTypeGroup="dataTypeGroup"/>
  </div>
</template>

<script>
import previewDialog from "./previewDialog";
import dataTypeDialog from "../../../views/user/data_type_setting/dialog";

export default {
  name: 'user_billSettingEdit',
  props: {
    _dataId: [String, Number]
  },
  components: {previewDialog, dataTypeDialog},
  data() {
    return {
      isEdit: false,
      tabIndex: 'first',
      dataId: '',
      billSetting: {
        enabled: true,
        allCompany: true,
        dataTypeCode: null,
        dataTypeName: null
      },
      showCodeEditor: false,
      dataTypeGroup: "billSetting",
      showDataTypeDialog: false
    };
  },
  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.$commonHttp({
          url: USER_PREFIX + `/bill_setting/get`,
          method: `post`,
          data: {
            id: this.dataId
          },
          isLoading: true,
          modalStrictly: true,
          success: res => {
            this.billSetting = res.objx || {};
            this.showCodeEditor = true;
          }
        });
      } else {
        this.showCodeEditor = true;
      }
    },
    saveData() {
      this.$refs.editForm.$baseValidate(valid => {
        if (valid) {
          this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
            var url = USER_PREFIX + (this.isEdit ? `/bill_setting/update` : `/bill_setting/save`);
            this.$http({
              url: url,
              method: `post`,
              data: this.billSetting,
              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
                        }
                      });
                    }
                  }
                });
              }
            });
          });
        }
      });
    },
    openPreview() {
      this.$refs.previewDialog.init(this.billSetting)
    },
    confirmDataType(rows) {
      if (rows.length) {
        let row = rows[0];
        this.billSetting.dataTypeCode = row.dataTypeCode;
        this.billSetting.dataTypeName = row.dataTypeName;
      }
    }
  }
};
</script>
