<template>
  <el-row :gutter="20">
    <el-col :span="20">
      <MdView>
        <template>
          # 查询策略控件
        </template>
      </MdView>
      <CodeBox
        name="新建查询策略控件"
        alias="addQueryStrategy"
        :code="demo.code"
        desc="用于查询列表新建查询策略控件，如果当前类表设置了默认的查询策略则使用当前默认的作为查询条件，不同的查询列表需要设置的table-code是不一样的。"
      >
        <template slot="demo">
          <div>
            <el-button @click="showDialog()" >显示新建查询策略</el-button>
            <el-divider />
            <ht-add-query-strategy :dialog-visible="dialogVisible" table-code="ht_uc_user"
            @queryStrategyCancle="queryStrategyCancle" 
            @queryStrategySave="queryStrategySave"
            :field-options="fieldOptions" ></ht-add-query-strategy>
            <pre> {{ queryStrategyData}} </pre>
          </div>
        </template>
      </CodeBox>
    </el-col>
    <el-col :span="4">
      <AnchorWrapper :anchors="demo.anchors" />
    </el-col>
  </el-row>
</template>
<script>
import CodeBox from "@/components/CodeBox.vue";
import AnchorWrapper from "@/components/AnchorWrapper.vue";
import MdView from "@/views/MdView.vue";

export default {
  name: "Form",
  components: { CodeBox, AnchorWrapper, MdView },
  data() {
    return {
      dialogVisible:false,
      fieldOptions:[
        {label:"状态",value:"status_",options:['禁用','未禁用']},
        {label:"名称",value:"fullname"},
        {label:"修改时间",value:"update_time_"}
      ],
      queryStrategyData:{},
      demo: {
        anchors: [
          {
            content: "新建查询策略",
            alias: "addQueryStrategy"
          }
        ],
        code: `
          <div>
            <ht-add-query-strategy :dialog-visible="dialogVisible" table-code="ht_uc_user"
            @queryStrategyCancle="queryStrategyCancle" 
            @queryStrategySave="queryStrategySave"
            :field-options="fieldOptions" ></ht-add-query-strategy>
          </div>
        `
      }
    };
  },
  methods:{
    showDialog(){
      this.dialogVisible = true;
    },
    queryStrategyCancle(){
      this.dialogVisible = false;
    },
    queryStrategySave(data){
      this.dialogVisible = false;
      this.queryStrategyData = data;
    }

  }
};
</script>
<style lang="scss" scoped>
.item-label {
  font-size: 12px;
}
</style>