<template>
  <div>
    <!-- 查询配置 -->
    <div>
      <div ref="lxHeader">
        <LxHeader icon="md-apps" :text="customForm.tableName" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content"></div>
          <slot>
            <header-content :auths="auths_auth_mixin">
              <template #search>
                <div style="display: flex">
                  <Select v-model="select.filter[0].key" style="width: 100px;" placeholder="搜索条目">
                    <Option v-for="item in form" :key="item.id" :value="item.field">{{ item.name }}</Option>
                  </Select>
                  <Select v-model="select.filter[0].op" style="width: 100px;margin-left: 10px;" placeholder="搜索条件">
                    <Option v-for="item in op" :key="item.value" :value="item.value">{{ item.label }}</Option>
                  </Select>
                  <template v-if="select.filter[0].op !== 'range' && !columnArrTest(select.filter[0].key)">
                    <Input v-model="select.filter[0].value" style="width: 150px;margin-left: 10px;" placeholder="请填写关键词"/>
                  </template>
                  <template v-else-if="select.filter[0].op !== 'range' && columnArrTest(select.filter[0].key)">
                    <Select v-model="select.filter[0].value" style="width: 150px;margin-left: 10px;" placeholder="请选择关键词">
                      <Option v-for="item in getColumnParams(select.filter[0].key)" :key="item.id" :value="item.id">{{ item.value }}</Option>
                    </Select>
                  </template>
                  <template v-else>
                    <Input :value="select.filter[0].value.split(',')[0]"
                           style="width: 150px;margin-left: 10px;"
                           placeholder="范围开始关键词"
                           @input="(e)=>inputStartHandler(e,select.filter[0])"/>
                    <span style="margin-left: 10px;display: flex;align-items: center;">至</span>
                    <Input :value="select.filter[0].value.split(',')[1]"
                           style="width: 150px;margin-left: 10px;"
                           placeholder="范围结束关键词"
                           @input="(e)=>inputEndHandler(e,select.filter[0])"/>
                  </template>
                  <Button
                    style="margin-left: 10px"
                    type="primary"
                    @click="$refs['xyTable'].getTableData(true)"
                  >查询</Button
                  >

                  <xy-selectors
                    style="margin-left: 10px"
                    @reset="reset"
                    @search="$refs['xyTable'].getTableData(true)"
                  >
                    <template>
                      <div class="select">
                        <div class="select__item" v-for="(item,index) in select.filter">
                          <p>条件{{index+1}}</p>
                          <Select v-model="item.key" style="width: 100px;" placeholder="搜索条目">
                            <Option v-for="item in form" :key="item.id" :value="item.field">{{ item.name }}</Option>
                          </Select>
                          <Select v-model="item.op" style="width: 100px;margin-left: 10px;" placeholder="搜索条件">
                            <Option v-for="item in op" :key="item.value" :value="item.value">{{ item.label }}</Option>
                          </Select>
                          <template v-if="item.op !== 'range' && !columnArrTest(item.key)">
                            <Input v-model="item.value" style="width: 150px;margin-left: 10px;" placeholder="请填写关键词"/>
                          </template>
                          <template v-else-if="item.op !== 'range' && columnArrTest(item.key)">
                            <Select v-model="item.value" style="width: 150px;margin-left: 10px;" placeholder="请选择关键词">
                              <Option v-for="item in getColumnParams(item.key)" :key="item.id" :value="item.id">{{ item.value }}</Option>
                            </Select>
                          </template>
                          <template v-else>
                            <Input :value="item.value.split(',')[0]"
                                   style="width: 150px;margin-left: 10px;"
                                   placeholder="范围开始关键词"
                                   @input="(e)=>inputStartHandler(e,item)"/>
                            <span style="margin-left: 10px;">至</span>
                            <Input :value="item.value.split(',')[1]"
                                   style="width: 150px;margin-left: 10px;"
                                   placeholder="范围结束关键词"
                                   @input="(e)=>inputEndHandler(e,item)"/>
                          </template>
                          <el-button v-if="index !== 0" size="small" type="danger" icon="el-icon-delete" circle style="margin-left: 10px;" @click="select.filter.splice(index,1)"></el-button>
                        </div>
                      </div>
                      <div class="add-btn">
                        <el-button size="small" type="primary" icon="el-icon-plus" circle @click="select.filter.push({key: '',op: '',value: ''})"></el-button>
                        <span>新增一条</span>
                      </div>
                    </template>
                  </xy-selectors>
                </div>
              </template>
              <template #create>
                <Button
                  type="primary"
                  @click="$refs['dialog'].setType('add'),$refs['dialog'].show()"
                >新增</Button
                >
              </template>
            </header-content>
          </slot>
        </LxHeader>
      </div>
    </div>

    <xy-table
      :auths="auths_auth_mixin"
      :delay-req="true"
      :destroy-action="destroy"
      ref="xyTable"
      :border="true"
      :action="index"
      :req-opt="Object.assign(select,selectForm)"
      :destroy-req-opt="select"
      :table-item="table"
      @editor="row => {
        $refs['dialog'].setId(row.id);
        $refs['dialog'].setType('editor');
        $refs['dialog'].show();
      }"></xy-table>

    <dialoger :table-name="customForm.tableName" :form-info="form" ref="dialog" @refresh="$refs['xyTable'].getTableData()"></dialoger>
  </div>
</template>

<script>
import { index as fieldIndex } from "@/api/system/customFormField"
import { authMixin } from "@/mixin/authMixin";
import { index,destroy } from "@/api/system/baseForm"
import { op } from "@/const/op"

import dialoger from './dialog.vue'
import LxHeader from "@/components/LxHeader/index.vue";
import headerContent from "@/components/LxHeader/XyContent.vue";
export default {
  components:{
    LxHeader,
    dialoger,
    headerContent,
  },
  mixins: [authMixin],
  data() {
    return {
      op,
      select: {
        table_name: "",
        filter: [
          {
            key: "",
            op: "",
            value: ""
          }
        ]
      },
      selectForm: [],
      form: [],
      table: [],
      customForm: {
        customFormId: "",
        tableName: ""
      }
    }
  },
  methods: {
    index,destroy,
    reset() {
    },

    //target要为内存地址引用类型
    inputStartHandler(e,target) {
      let temp = target?.value.split(',')[1]
      target.value = `${e},${temp ? temp : ""}`
    },
    inputEndHandler(e,target) {
      let temp = target?.value.split(',')[0]
      target.value = `${temp ? temp : ""},${e}`
    },

    async getField() {
      if(this.$route.meta.params?.custom_form) {
        let decode = decodeURIComponent(this.$route.meta.params?.custom_form)
        try {
          let custom_form = JSON.parse(decode)
          this.customForm.customFormId = custom_form.custom_form_id
          this.customForm.tableName = custom_form.table_name
          this.select.table_name = custom_form.table_name
        }catch (err) {
          console.warn(err)
        }
      }

      const res = await fieldIndex({
        page: 1,
        page_size: 999,
        custom_form_id: this.customForm.customFormId
      })
      this.form = res.data
      this.selectForm = ''
      this.table = res.data.map(i => {
        return {
          prop: i.field,
          label: i.name
        }
      })
    }
  },
  computed: {
    columnArrTest() {
      return function (field) {
        return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field).search_input === 'checkbox' : false
      }
    },
    getColumnParams() {
      return function (field) {
        return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field).paramters : []
      }
    },
  },
  created() {
    this.getField()

  }
}
</script>

<style scoped lang="scss">
.select {
  &__item {

    & > p {
      display: inline-block;
      width: 80px;
      text-align: center;
    }

    & + div {
      margin-top: 6px;
    }
  }
}
.add-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 10px;
  & > span {

    padding: 0 10px;
  }
}
</style>
