<template>
  <div>
    <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" width="800">
      <div slot="header">
        <span class="title">{{ $t('Front_Label_Condition_Setting') }}</span>
        <span class="description">{{ $t('Front_Label_Condition_Setting_Desc') }}</span>
      </div>
      <div class="ivu-ml-8 ivu-mr-8">
        <Form ref="form" :model="data" label-position="top" label-colon="：" class="ivu-mt" :rules="rules" @submit.native.prevent>
          <Row :gutter="24" type="flex">
            <Col v-bind="grid24">
              <FormItem :label="$t('Front_Label_Judgement_Condition')" key="type" prop="type">
                <RadioGroup v-model="data.type" @on-change="onTypeChange">
                  <Radio v-for="item in getEnumList('ConditionType')" :key="item.id" :label="item.id">{{ item.name }}</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col v-bind="grid24" v-if="data.type == 'Expression'">
              <FormItem :label="$t('Front_Label_Expression')" key="expression" prop="expression">
                <Input type="text" v-model="data.expression" maxlength="500" />
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div v-show="data.type == 'Condition'">
          <Divider :plain="true" dashed orientation="left" size="small">
            <span class="title">{{ $t('Front_Label_Condition') }}</span>
          </Divider>
          <view-table ref="conditionTable" :static="true" view-code="ColumnCondition" :pageEnable="false" :embedded="true">
            <template slot="column" slot-scope="{ row, code }">
              <template v-if="code == 'code'">
                <Input type="text" size="small" v-model="row.code">
                  <Button slot="prepend" size="small" custom-icon="fa fa-search" @click="openColumnSelect(row)"></Button>
                </Input>
              </template>
            </template>
          </view-table>
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" custom-icon="fa fa-check" @click="save">{{ $t('Front_Btn_OK') }}</Button>
        <Button type="default" custom-icon="fa fa-times" @click="opened = false">{{ $t('Front_Btn_Close') }}</Button>
      </div>
    </Modal>
    <column-check ref="columnCheck" />
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import columnCheck from './column-check';

  export default {
    mixins: [mixinPage],
    components: { columnCheck },
    data() {
      return {
        parentData: null,
        jsonKey: null,
        checkKey: null,
        json: null,
        model: null,
        data: {},
        opened: false,
        rules: {
          expression: {
            type: 'string',
            required: true,
            message: this.$t('Front_Msg_Please_Input'),
            trigger: 'blur,change'
          }
        }
      };
    },
    async created() {},
    props: {},
    computed: {},
    methods: {
      // 打开
      open(parentData, jsonKey, checkKey, model) {
        this.parentData = parentData;
        this.jsonKey = jsonKey;
        this.checkKey = checkKey;
        let json = parentData[jsonKey];
        if (!!(json || '').trim()) {
          this.data = JSON.parse(json);
        } else {
          this.data = {
            type: parentData[checkKey] ? 'True' : 'False'
          };
        }

        this.model = model;
        this.onTypeChange();
        this.opened = true;
        this.$refs.form.resetFields();
      },
      // 类型变更
      onTypeChange() {
        if (this.data.type == 'Condition') {
          if (!this.data.condition) {
            this.data.condition = [];
          }

          this.$refs.conditionTable.loadData(this.data.condition);
        }

        this.$forceUpdate();
      },
      // 打开变量字段选择界面
      openColumnSelect(row) {
        if (this.model != null) {
          this.$refs.columnCheck.open(this.model, checked => {
            row.code = checked.code;
            this.$forceUpdate();
          });
        }
      },
      // 保存
      async save() {
        let isOK = await this.$refs.form.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
          return;
        }

        if (this.data.type == 'Condition') {
          if (!this.$refs.conditionTable.validate()) {
            return;
          }

          let condition = this.$refs.conditionTable.getData();

          if (condition.length == 0) {
            this.error('Front_Msg_At_Least_One_Codition');
            return;
          }

          this.data.condition = this.$refs.conditionTable.getData();
        } else {
          this.data.condition = [];
        }

        this.parentData[this.jsonKey] = JSON.stringify(this.data);

        if (this.data.type == 'True') {
          this.parentData[this.checkKey] = true;
        } else if (this.data.type == 'False') {
          this.parentData[this.checkKey] = false;
        } else {
          this.parentData[this.checkKey] = null;
        }

        this.opened = false;
      }
    }
  };
</script>
