<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
      <el-form-item prop="landMarkId" label="地标ID">
        <template>
          <el-select v-model="formData.landMarkId" clearable filterable placeholder="请选择" :disabled="'landMarkId'==subColumn">
            <el-option v-for="item in landMarkIdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item prop="name" label="标题">
        <el-input v-model="formData.name" :disabled="'name'==subColumn" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="描述">
        <!-- <el-input type="textarea" v-model="formData.remark" :disabled="'remark'==subColumn"></el-input> -->
        <rich-text :height="500" v-model="formData.remark" :noImage="true"></rich-text>
      </el-form-item>
      <el-form-item prop="payFlag" label="是否付费">
        <el-switch v-model="formData.payFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'payFlag'==subColumn" @change="formData.price=0"></el-switch>
      </el-form-item>
      <el-form-item prop="price" label="价格">
        <el-input-number v-model="formData.price" :precision="2" :step="0.1" :min="0" :max="999" :disabled="!formData.payFlag">
        </el-input-number>
        <span>RMB</span>
      </el-form-item>
      <el-form-item prop="rank" label="排序">
        <el-input type="number" v-model="formData.rank" :disabled="'rank'==subColumn"></el-input>
      </el-form-item>
      <el-form-item prop="shelfFlag" label="是否上线">
        <el-switch v-model="formData.shelfFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'shelfFlag'==subColumn"></el-switch>
      </el-form-item>

      <el-form-item prop="aimPlace" label="点标ID">
        <el-input v-model="formData.aimPlace" type="textarea" :rows="2" placeholder="点标ID用英文逗号分隔，如 12,13,14"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
        <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
        <el-button @click="$router.go(-1)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import formValidator from '../formValidator'
import RichText from '../components/RichText'

export default {
  created() {
    if (this.$route.query.column) {
      this.subColumn = this.$route.query.column.split(',')[1];
      this.subValue = this.$route.query.column.split(',')[0];
    }

    if (this.$route.query.id) {
      this.$http.get({
        url: '/navigationPackage/getOne',
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        if (res.success) {


          this.formData = res.data;

          if (this.$route.query.column) {
            this.formData[this.subColumn] = this.subValue;
          }

          this.formData.payFlag = this.formData.payFlag == 'Y' ? true : false;
          this.formData.shelfFlag = this.formData.shelfFlag == 'Y' ? true : false;

        }
      })
    } else {
      if (this.$route.query.column) {
        this.formData[this.subColumn] = this.subValue;
      }
    }




    this.$http.get({
      url: '/landMark/noMapAll'
    }).then(res => {
      if (res.success) {

        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.landMarkIdOptions.push({ label: item.mapName, value: item.id });
          })
        }
      }
    });
  },
  data() {
    return {
      saving: false,
      formData: {
        price: 0,
        rank: 0
      },
      rules: {
        name: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('标题不能为空'));
              } else if (/^[A-Za-z0-9\u4e00-\u9fa5]+$/.test(value)) {
                callback();
              } else {
                callback(new Error('请输入中文，英文或者数字'));
              }
            }, trigger: 'blur'
          }
        ]
      },
      landMarkIdOptions: [],
      subColumn: '',
      subValue: '',
    }
  },
  methods: {
    onSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return false;
        }
      });
    },
    submit() {
      var data = JSON.parse(JSON.stringify(this.formData));

      data.payFlag = this.formData.payFlag ? 'Y' : 'N';
      data.shelfFlag = this.formData.shelfFlag ? 'Y' : 'N';

      delete data.aimPlace;

      this.$http.post({
        url: this.formData.id ? '/navigationPackage/update' : '/navigationPackage/save',
        data: data
      }).then(res => {
        if (res.success) {
          this.$message.success('成功');
          this.$router.go(-1);
        } else {
          this.$message.warning('失败')
        }
      });
    },
    onDelete() {
      this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
        return this.$http.post({
          url: '/navigationPackage/del',
          data: { id: this.formData.id }
        })
      }).then(() => {
        this.$message.success('删除成功');
        this.$router.go(-1);
      }).catch(action => {
        if (action === 'cancel') {
          this.$message.info('删除取消');
        } else {
          this.$message.error('删除失败');
        }
      })
    },
  },
  components: {
    RichText
  }
}
</script>
<style lang="less" scoped>
</style>
