<template>
  <div>
    <el-dialog
      title="生效条件"
      :visible.sync="takeFormVisible"
      :before-close="close"
      width="66%"
    >
      <el-form inline ref="goodsForm" label-position="top" :model="formData" >
        <el-form-item >
          <span class="form-item"><em>行号：</em> {{formData.lineNo}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>费用种类：</em> {{formData.feeCategory}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>作业环节：</em> {{formData.tranType}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>费用名称：</em> {{formData.ebfhNameCn}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>收支类型：</em> {{formData.receivePay}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>计费基准：</em> {{formData.chargeBase}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>舍入类型：</em> {{formData.roundingType}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>费用类别：</em> {{formData.feeType}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>单价：</em> {{formData.price}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>最低费用：</em> {{formData.minFee}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>最高费用：</em> {{formData.maxFee}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>备注：</em> {{formData.remark}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>计费方式：</em> {{formData.chargeType}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>计费阶梯方式：</em> {{formData.ladderType}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>级差类型：</em> {{formData.classType}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>周期单位：</em> {{formData.cycleUnit}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>计费周期：</em> {{formData.chargeCycle}}</span>
        </el-form-item>
        <el-form-item >
          <span class="form-item"><em>固定计费日：</em> {{formData.fixDay}}</span>
        </el-form-item>
      </el-form>
      <div class="mrg-t" >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="级差" name="2">
          <el-table class="mrg-t" :data="levelList" ref="table" border  >
            <table-column label="序号" prop="seq"></table-column>
            <table-column label="级差区间从(大于)" prop="fmClass">
              <template slot-scope="scope">
                <el-input v-if="scope.row.isSet" v-model="scope.row.fmClass"></el-input>
                <span v-else>{{scope.row.fmClass}}</span>
              </template>
            </table-column>
            <table-column label="级差区间到(小于等于)" prop="toClass">
              <template slot-scope="scope">
                <el-input v-if="scope.row.isSet" v-model="scope.row.toClass"></el-input>
                <span v-else>{{scope.row.toClass}}</span>
              </template>
            </table-column>
            <table-column label="按单价/按总价" prop="priceType">
              <template slot-scope="scope">
                <el-select v-if="scope.row.isSet" v-model="scope.row.priceType">
                  <el-option label="按单价" value="UNIT"></el-option>
                  <el-option label="按总价" value="TOTAL"></el-option>
                </el-select>
                <span v-else>{{scope.row.priceType}}</span>
              </template>
            </table-column>
            <table-column label="单价/总价" prop="price">
              <template slot-scope="scope">
                <el-input v-if="scope.row.isSet" v-model="scope.row.price"></el-input>
                <span v-else>{{scope.row.price}}</span>
              </template>
            </table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="mrg-t" >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="生效条件" name="3">
          <div>
            <el-button v-auth="50600020212" type="primary" @click="handleCond">新增</el-button>
            <el-button v-auth="50600020212" type="primary" @click="handleDelRows">删除</el-button>
            <el-button v-auth="50600020212" type="primary" @click="handleLookSQL">查看SQL</el-button>
          </div>
          <el-table  :data="condList" ref="table" border @selection-change="handleChange" >
            <table-column type="selection" fixed  align="center" ></table-column>
            <table-column label="AND/OR " prop="andOr">
              <template slot-scope="scope">
                <el-select v-model="scope.row.andOr" v-if="scope.row.isSet">
                  <el-option label="AND" value="AND"></el-option>
                  <el-option label="OR" value="OR"></el-option>
                </el-select>
                <span v-else>{{scope.row.andOr}}</span>
              </template>
            </table-column>
            <table-column label="( 对象 对象属性 运算符 值 ) " >
              <template slot-scope="scope">
                <div class="table-item" v-if="scope.row.isSet">
                  <PublicQuery
                  title="对象"
                  single
                  :rowData.sync="feeData"
                  baseUrl="/chg_web/chgweb"
                  cfgKey="chgWmsObj"
                  :valueField.sync="scope.row.objCode"
                  :textField.sync="scope.row.objName"></PublicQuery>

                  <PublicQuery
                  title="对象属性"
                  single
                  :rowData.sync="feeData"
                  baseUrl="/chg_web/chgweb"
                  cfgKey="chgWmsObjAtt"
                  :valueField.sync="scope.row.objAttCode"
                  :textField.sync="scope.row.objAttName"></PublicQuery>

                  <el-select  v-model="scope.row.operator">
                    <el-option label="=" value="="></el-option>
                    <el-option label="!=" value="!="></el-option>
                    <el-option label="<" value="<"></el-option>
                    <el-option label="<=" value="<="></el-option>
                    <el-option label=">" value=">"></el-option>
                    <el-option label=">=" value=">="></el-option>
                    <el-option label="LIKE" value="LIKE"></el-option>
                    <el-option label="NOT LIKE" value="NOT LIKE"></el-option>
                  </el-select>
                   <el-input  v-model="scope.row.value"></el-input>
                </div>
                <div v-else>
                  <span >{{scope.row.objName}}</span>
                  <span class="span">{{scope.row.objAttName}}</span>
                  <span class="span">{{scope.row.operator}}</span>
                  <span class="span">{{scope.row.value}}</span>
                </div>
              </template>
            </table-column>
            <table-column label="操作">
              <template slot-scope="scope">
                <el-tooltip content="保存" placement="top">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-check"
                    plain
                    circle
                    @click="handleSaveCond(scope.$index, scope.row,true)"
                  ></el-button>
                </el-tooltip>
              </template>
            </table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
    </el-dialog>
     <SQl :sqlFormVisible="sqlFormVisible" :sql="sqlData" @close="sqlFormVisible=false"></SQl>
  </div>
</template>
<script>
import SQl from './sql'
export default {
  components: {
    SQl
  },
  data () {
    return {
      activeNames: ['1', '2', '3'],
      formData: {},
      feeData: {},
      ids: [],
      sqlData: '',
      sqlFormVisible: false
    }
  },
  props: {
    takeFormVisible: Boolean,
    currentRow: {
      type: Object,
      default: () => ({})
    },
    levelList: Array,
    condList: Array,
  },
  mounted () {
  },
  methods: {
    close () {
      this.$emit('close')
      this.$refs.goodsForm.resetFields()
    },
    handleCond () {
      for (let i of this.condList) {
        if (i.isSet) return this.$message.warning('请先保存当前编辑项')
      }
      const list = {
        contractNo: this.formData.contractNo,
        lineNo: this.formData.lineNo,
        andOr: 'AND',
        leftBracket: '(',
        rightBracket: ')',
        objName: '',
        objAlias: '',
        objAttName: '',
        operator: '=',
        value: '',
        isNewRecord: false,
        objCode: '',
        objAttCode: '',
        isSet: true,
      }
      this.condList.unshift(list)
    },

    handleDelRows () {
      for (let i of this.condList) {
        if (i.isSet) return this.$message.warning('请先保存当前编辑项')
      }
      const url = this.$API.charging.contract.removeContractCond
      const condUrl = this.$API.charging.getDetailCond
      const param = { contractNo: JSON.stringify(this.formData.contractNo), lineNo: JSON.stringify(this.formData.lineNo), jobIds: JSON.stringify(this.ids) }
      this.$https.post(url, param).then(res => {
        this.$emit('handleReGetList', { contractNo: this.formData.contractNo, lineNo: this.formData.lineNo })
      })
    },
    handleSaveCond (index, row) {
      delete row.isSet
      const url = this.$API.charging.contract.saveContractCond
      const condUrl = this.$API.charging.getDetailCond
      let arr = []
      arr.push(row)
      const param = { contractNo: JSON.stringify(this.formData.contractNo), lineNo: JSON.stringify(this.formData.lineNo), wmContractDetailCondBeans: JSON.stringify(arr) }
      this.$https.post(url, param).then(res => {
        this.$emit('handleReGetList', row)
      })
    },

    handleLookSQL () {
      const url = this.$API.charging.contract.lookSql
      const param = { contractNo: JSON.stringify(this.formData.contractNo), lineNo: JSON.stringify(this.formData.lineNo) }
      this.$https.post(url, param).then(res => {
        this.sqlFormVisible = true
        this.$nextTick(() => {
          this.sqlData = res.data
        })
      })
    },

    handleChange (selection) {
      this.ids = selection.map(item => item.jobId)
    }
  },

  watch: {
    currentRow: {
      handler (item) {
        this.formData = { ...item }
      },
      deep: true
    },
    feeData: {
      handler (item) {
        this.condList[0].objAlias = item.objAlias
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.mrg-t{
  margin-top: 20px
}
.pad-t {
  display: inline-block;
  padding-top: 9px;
}
.break {
  width: 112px;
  display: inline-block;
  word-wrap: break-word;
  padding-top: 10px;
}
.form-item {
  display: inline-block;
  margin-left: 10px;
  em{
    font-style: normal;
    color: #9c9d9e
  }
}
  .table-item{
    display: inline-block !important;
  }
.span{
    display: inline-block !important;
    margin-left: 15px;
  }
</style>
