<template>
  <div class="auto-block">
    <table>
      <tr>
        <td class="td-label">
          <label class="el-form-item__label condition_label">排序条件:</label>
        </td>
        <td align="left">
          <sort-column class="sort-column" :dataModel.sync="sortModel1" :selected.sync="dataModel.content.sortfield[0][0]"></sort-column>
        </td>
      </tr>
      <tr>
        <td align="right"></td>
        <td align="left">
          <sort-column class="sort-column" :dataModel.sync="sortModel2" :selected.sync="dataModel.content.sortfield[0][1]"></sort-column>
        </td>
      </tr>
      <tr>
        <td align="right"></td>
        <td align="left">
          <sort-column class="sort-column" :dataModel.sync="sortModel3" :selected.sync="dataModel.content.sortfield[0][2]"></sort-column>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
  .auto-block .sort-column {
    margin-bottom: 22px;
  }

  .auto-block .td-label {
    width: 12%;
  }

  .auto-block .condition_label {
    width: 120px;
  }

  .auto-block .sort-column {
    margin-left: 10px;
  }
</style>

<script>
import SortColumn from './sortColumn.vue'
export default {
  components: {
    'sort-column': SortColumn
  },
  props: ['dataModel', ''],
  data() {
    return {
      sortModel1: {
        orderColumns: [],
        orderType: [],
        column: '',
        operator: '',
        value: '',
        type: ''
      },
      sortModel2: {
        orderColumns: [],
        orderType: [],
        column: '',
        operator: '',
        value: '',
        type: ''
      },
      sortModel3: {
        orderColumns: [],
        orderType: [],
        column: '',
        operator: '',
        value: '',
        type: ''
      },
      sortfield: [
        [
          {
            column: '',
            type: ''
          },
          {
            column: '',
            type: ''
          },
          {
            column: '',
            type: ''
          }
        ]
      ],
      num2: [1, 2, 3],
      orderColumns: [],
      orderType: []
    }
  },
  methods: {
    async loadOrderColumns() {
      let data = await axios.get(`/ui/blocklist/orderconditioncolumns`)
      this.orderColumns = data.data.data
      this.num2.forEach(function (value) {
        this['sortModel' + value].orderColumns = data.data.data
      }, this)
    },
    async loadOrderTypes() {
      let data = await axios.get(`/ui/blocklist/ordertype`)
      this.orderType = data.data.data
      this.num2.forEach(function (value) {
        this['sortModel' + value].orderType = data.data.data
      }, this)
    },
    conditionInit() {
      if (!this.dataModel.content.sortfield[0][0]) {
        this.dataModel.content.sortfield = this.sortfield
      }
    }
  },
  created() {
    this.conditionInit()
    this.loadOrderColumns()
    this.loadOrderTypes()
  }
}
</script>
