<template>
  <div>
    <el-button size="small" type="primary" @click="drawer = true">绑定数据字段</el-button>
    <el-drawer title="绑定数据"
      append-to-body
      :modal="false"
      :visible.sync="drawer"
      direction="rtl">
      <div class="drawer__panel">
        <el-tabs v-model="activeName">
          <el-tab-pane label="绑定数据字段" name="first"></el-tab-pane>
          <el-tab-pane label="数据集" name="second"></el-tab-pane>
        </el-tabs>
        <div v-if="activeName === 'first'">
          <div v-for="(item,idx) in panels" :key="idx" class="mt-10">
            <div v-if="item.printElementType.type === 'text'">
              <p class="preview__item">{{item.options.title}}</p>
              <el-select size="mini" v-model="item.options.sys_printdatasetid" placeholder="请选择" @click.native="act_DataBaseID = idx">
                <el-option
                  v-for="i in databastlist"
                  :key="i.sys_printdatasetid"
                  :label="i.datasetname"
                  :value="i.sys_printdatasetid"
                  @click.native="queryDataBaseDetail(i.sys_printdatasetid)"
                  @visible-change="visibleChange">
                </el-option>
              </el-select>&nbsp;
              <el-select size="mini" v-model="item.options.field" :disabled="idx !== act_DataBaseID" placeholder="请选择" @change="onChange">
                <el-option
                  v-for="i in sys_printdataset"
                  :key="i.sys_printdataset_columnsid"
                  :label="i.column_name"
                  :value="i.column_name"
                  @visible-change="visibleChange">
                </el-option>
              </el-select>
            </div>
            <div v-if="item.printElementType.type === 'table'">
              <p style="font-size:12px;color:#999;margin-bottom:10px">表格数据:{{item.options.field}}</p>
              <div>
                <el-select size="mini" v-model="item.options.sys_printdatasetid" placeholder="请选择" @click.native="act_DataBaseID = idx" @change="queryDataBaseDetail">
                  <el-option
                    v-for="i in databastlist"
                    :key="i.sys_printdatasetid"
                    :label="i.datasetname"
                    :value="i.sys_printdatasetid"
                    @click.native="setTableField(item.options.field = `dataset${idx}`)">
                  </el-option>
                </el-select>&nbsp;
                <div v-for="td in item.options.columns[0]" :key="td.index">
                  <p class="preview__item">{{td.title}}</p>
                  <el-select size="mini" v-model="td.field" :disabled="idx !== act_DataBaseID" placeholder="请选择" @change="onChange">
                    <el-option
                      v-for="i in sys_printdataset"
                      :key="i.sys_printdataset_columnsid"
                      :label="i.column_name"
                      :value="i.column_name"
                      @visible-change="visibleChange">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
          <el-button type="primary" size="mini" @click="saveJson">保 存</el-button>
        </div>
        <div v-else>
          <el-tag style="margin:0 10px 10px 0" type="danger" v-for="item in databastlist" :key="item.index" :disable-transitions="true" effect="dark" size="small" @close="deleteDatabase(item)" closable> {{item.datasetname}}</el-tag>
          <div class="normal-margin">
            <el-input style="margin-bottom:10px" size="small" v-model="database.datasetname" placeholder="请输入数据集名称"></el-input>
            <el-input size="small" type="textarea" v-model="database.sqlstr" placeholder="请输入sql语句" :autosize="{ minRows: 3, maxRows: 6 }"></el-input>
          </div>
          <el-button type="primary" size="small" @click="saveDatabase">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import panel from '../../modules/mode.js'
export default {
  props:['temp','modeData'],
  computed:{
    formComponent(){
      if (this.dialogFormVisible) {
        return ()=>import(`@/style/sv-print.css`)
      } else {
        return
      }
    }
  },
  data () {
    return {
      drawer:false,
      activeName:'first',
      template:{},
      panels:{},
      databastlist:[],
      sys_printdataset:[],
      act_DataBaseID:null,
      database:{}
    }
  },
  methods:{
    onDesigned () {},
    async saveJson () {
      this.template.panels[0].printElements = this.panels
      const res = await this.$api.requested({
        "id": 20221121160001,
        "content": { 
          "sys_printmodelid": this.$route.query.id,
          "systemappid":this.modeData.systemappid,
          "modelname":this.modeData.modelname,
          "modeljson":this.template,
          "isused":this.modeData.isused
        }
      })
    },
    async saveDatabase () {
      this.database.sys_printmodelid = this.$route.query.id
      const res = await this.$api.requested({
        "id": 20221121160301,
        "content": this.database,
      })
      this.querDataBase()
    },
    async querDataBase () {
      const res = await this.$api.requested({
        "id": 20221121160201,
        "content": { 
          "sys_printmodelid": this.$route.query.id
        }
      })
      this.databastlist = res.data
    },
    async deleteDatabase (item) {
       const res = await this.$api.requested({
        "id": 20221121160401,
        "content": { 
          "sys_printdatasetid":item.sys_printdatasetid
        }
      })
      this.querDataBase()
    },
    async queryDataBaseDetail (item) {
      const res = await this.$api.requested({
        "id": 20221121160501,
        "content": { 
          "sys_printdatasetid":item
        }
      })
      this.sys_printdataset = res.data
    },
    visibleChange (val) {
      // val?this.queryDataBaseDetail():''
      val?'':this.sys_printdataset = []
    },
    onChange () {},
    onClose () {
      this.$emit('onClose')
    },
    setTableField (item,id) {
      console.log(item,id)
    }
  },
  watch:{
    temp (val) {
       this.template = JSON.parse(val)
       this.panels = this.template.panels[0].printElements
    }
  },
  mounted () {
    this.querDataBase()
  }
}

</script>
<style scoped>
.preview{
  position: fixed;
  min-height: 600px;
  width: 550px;
  top:10px;
  right:30px;
  z-index: 99;
  background: #fff;
  box-shadow: 0 2px 4px #0000004d;
  padding: 10px;
}
.preview__item{
  position: relative;
  font-size: 12px;
  line-height: 30px;
}
.preview__item__table{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.preview__item__table p{
  flex: 1;
  width:80px ;
  border: 1px solid #f1f2f3;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  margin-left: -1px;
}
.binddata__panel{
  height: 90vh;
  min-height: 800px;
  overflow-y:scroll ;
}
</style>