<!--
 * @Description: App版本管理对话框组件
 * @Author: liusheng sunhuihong
 * @Date: 2022-08-04 11:43:52
-->
<template>
   <el-dialog width="600px" :title="title" @open="initData" :visible.sync="visible" 
    :close-on-click-modal="false" :before-close='handleClose' center>
    <el-form class="form" ref="versionForm" style="margin-bottom: 60px;" :rules="rules" :model="versionForm" label-width="120px">
      <el-form-item label="应用名称" >
        <el-input v-model="versionForm.name" :style="formInputWidth"  disabled></el-input>
      </el-form-item>
      <el-form-item label="平台" prop="platform">
        <el-row>
          <el-checkbox v-model="androidPlatform"  :disabled="androidPlatformDisabled">Android</el-checkbox>
          <el-checkbox v-model="androidStatus"  :disabled="androidStatusDisabled">立即启用</el-checkbox>
        </el-row>
        <el-row>
          <el-checkbox v-model="iosPlatform"  :disabled="iosPlatformDisabled">iOS</el-checkbox>&emsp;&ensp;
          <el-checkbox v-model="iosStatus"  :disabled="iosStatusDisabled">立即启用</el-checkbox>
        </el-row>
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input v-model="versionForm.version" minlength="1" maxlength="10" @input="inputVersion()" :style="formInputWidth"></el-input>
      </el-form-item>
      <el-form-item label="更新说明" prop="description">
        <el-input v-model="versionForm.description" minlength="1" maxlength="250" type="textarea" :rows="3" :style="formInputWidth" />
      </el-form-item>
      <el-form-item label="强制更新">
        <el-checkbox v-model="forceUpdate" >{{forceUpdate ? '是' : '否'}}</el-checkbox>
      </el-form-item>
      <el-form-item label="apk文件名" v-if="!iosPlatform || androidPlatform">
        <el-input v-model="versionForm.apkFilename" disabled :style="formInputWidth"></el-input>
      </el-form-item>
    </el-form>
    <div  class="dialog-footer bk-wizard-bottons">
      <el-button  @click="handleClose">取 消</el-button>&emsp;
      <el-button  type="primary" @click="handleSave('versionForm')">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AppVersionDialog',
  props: ["visible", "mode", "appVersionId"],

  data() {
    let validPlatform = (_rule, _value, callback) => {
      if(!this.androidPlatform && !this.iosPlatform ) {
        callback(new Error('请选择平台'));
      } else {
        callback();
      }
    };
    return {
      formInputWidth: 'width:340px',
      androidPlatform: false,           //当前选择的是否是安卓平台
      androidStatus: '',               //当前安卓平台的启用状态
      androidPlatformDisabled: false,  //当前安卓平台checkbox勾选框是否禁用
      androidStatusDisabled: false,    //当前安卓的启用状态checkbox勾选框是否禁用

      iosPlatform: false,               //当前选择的是否是ios平台
      iosStatus: '',                   //当前iOS的启用状态
      iosPlatformDisabled: false,      //当前ios平台checkbox勾选框是否禁用
      iosStatusDisabled: false,        //当前iOS的启用状态checkbox勾选框是否禁用
      forceUpdate: false,              //是否强制更新
      versionForm: {},
      rules: {
        version: [{required: true, message: '请输入版本号', trigger: 'blur' }],
        description: [{required: true, message: '请输入更新说明', trigger: 'blur'}],
        platform: [{ required: true, validator: validPlatform, trigger: "change" },]
      },
    }
  },
  
  computed: {
    title() {
      return this.mode == 'add' ? '发布新版本记录' : '编辑版本记录';
    }
  },

  methods:{
	  async initData() {
      this.clearVaild();
			await this.getAppVersionDO();
		},

		getAppVersionDO() {
			return new Promise((resolve) => {
				let url = (this.mode == 'add') ? this.commonUrl.URL_GET_APP_VERSION_DO_4_ADD : 
          this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_APP_VERSIONDO_4_UPDATE, this.appVersionId);
				this.appAxios("GET", url).then(result => {
				  this.versionForm = result.data;
          if (this.mode == 'add') {
            this.forceUpdate = false; 
          } else {
            this.initDataEditDo(result.data);
          }
					resolve();
				})
			})
		},

    //获取编辑表单Do处理数据（平台checkbox的禁用判断）
    initDataEditDo(data) {
      if (data.forceUpdate == 'false') {
        this.forceUpdate = false;
      } else if (data.forceUpdate == 'true') {
        this.forceUpdate = true;
      } else {
        this.forceUpdate = '';
      }
      if (data.platform == 'ios') {
        this.iosPlatform = true;
        this.iosStatus = data.status == 1 ? true : false;
        this.iosPlatformDisabled = true;
        this.androidPlatformDisabled = true;
        this.androidStatusDisabled = true;
      } else if(data.platform == 'android') {
        this.androidPlatform = true;
        this.androidStatus = data.status == 1 ? true : false;
        this.iosStatusDisabled = true;
        this.iosPlatformDisabled = true;
        this.androidPlatformDisabled = true;
      }
    },

    //输入版本号
    inputVersion() {
      this.versionForm.version = this.commonUtil.filterDigitals(this.versionForm.version, ['.']);
      let arr1 = this.versionForm.apkFilename.split("-v");
      let apkFilename = arr1[0] + '-v'+ this.versionForm.version + '.apk';
      this.versionForm.apkFilename = apkFilename;
    },
        
    clearData() {
      this.iosPlatform = false;
      this.androidPlatform = false;
      this.iosStatus = '';
      this.androidStatus = '';
      this.androidPlatformDisabled = false;
      this.androidStatusDisabled = false;
      this.iosStatusDisabled = false;
      this.iosPlatformDisabled = false;
    },

    clearVaild() {
    	this.$nextTick(() => {
        this.$refs["versionForm"].clearValidate();
      });
		},

    //得到新增表单时需要传递的数据
    getAddData() {
      let that = this;
      that.versionForm.apkFilename = that.iosPlatform && !that.androidPlatform ? '' : that.versionForm.apkFilename;
      that.versionForm.forceUpdate = that.forceUpdate ? 'true' : 'false';
      return {
        androidPlatform: that.androidPlatform ? 'android' : '',
        androidStatus: that.androidStatus ? '1' : '0',
        appVersion: that.versionForm,
        iosPlatform: that.iosPlatform ? 'ios' : '',
        iosStatus: that.iosStatus ? '1' : '0',
      };
    },

    //得到更新表单时需要传递的数据
    getEditData() {
      this.versionForm.apkFilename = this.iosPlatform ? '' : this.versionForm.apkFilename;
      if (this.androidPlatform) {
        this.versionForm.platform = 'android';
      } else if (this.iosPlatform) {
        this.versionForm.platform = 'ios';
      } else {
        this.versionForm.platform = '';
      }
      this.versionForm.status = this.androidStatus || this.iosStatus ? '1' : '0';
      this.versionForm.forceUpdate = this.forceUpdate ? 'true' : 'false';
      return this.versionForm;
    },

    //保存
    handleSave(versionForm) {
      this.$refs[versionForm].validate((valid) => {
        if (!valid) return false;
        let url = (this.mode == 'add') ? this.commonUrl.URL_SAVE_APP_VERSION : this.commonUrl.URL_UPDATE_APP_VERSION;
			  let method = (this.mode == 'add') ? 'POST' : 'PUT';
        let form = (this.mode == 'add') ? this.getAddData() : this.getEditData();
        this.appAxios(method, url, form).then((result) => {
          if (result != null) {
            this.clearData();
            this.$emit("close-dialog", true);
          }
        })
      });
    },

    handleClose() {
      this.clearData();
      this.$emit("close-dialog", false);
    }
  },
}
</script>

<style scoped>
.body {
  margin: 0;
  text-align: center;
  border: solid 0px;
}

.dialog-footer {
	text-align: center;
}
</style>