<template>
  <div>
    <el-dialog title="选择Tag词" :visible.sync="myTagFlag">
      <div>
        <el-row>
          <el-col :span="6">
            <span>通过名称查询:</span>
          </el-col>
          <el-col :span="18">
            <el-input type="text" @change="tagSearch"/>
          </el-col>
        </el-row>
      </div>
      <div>最近使用过的Tag词</div>
      <div>
      <el-table :data="tags" :span="20" :show-header="false">
          <el-table-column width="50" align="center">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <p>{{scope}}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="myTagFlag = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="confirmTag">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择来源" :visible.sync="sourceFlag">
      <div>
        <el-row>
          <el-col :span="6">
            <span>通过名称查询：</span>
          </el-col>
          <el-col :span="18">
            <el-input type="text" @change="tagSearch"/>
          </el-col>
        </el-row>
      </div>
      <div>最近使用过的：</div>
      <div>
      <el-table :data="sources" :span="20" :show-header="false">
          <el-table-column width="50" align="center">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <p>{{scope}}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="mySourceFlag = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="confirmSource">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="相关内容" :visible.sync="relaContentFlag">
      <div>
        <el-row>
          <el-col :span="6">
            <span>通过名称查询：</span>
          </el-col>
          <el-col :span="18">
            <el-input type="text" @change="tagSearch"/>
          </el-col>
        </el-row>
      </div>
      <div>最近使用过的：</div>
      <div>
      <el-table :data="relaContent" :span="20" :show-header="false">
          <el-table-column width="50" align="center">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <p>{{scope}}</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="mySourceFlag = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="confirmSource">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style slot-scope="scope">

</style>

<script>
export default {
  props: ['contentTypeID', 'tagFlag', 'sourceFlag', 'relaContentFlag'],
  data() {
    return {
      tags: [],
      sources: [],
      relaContents: [],
      myTagFlag: this.tagFlag,
      mySourceFlag: this.sourceFlag,
      myRelaContentFlag: this.myRelaContentFlag
      //  tagFlag: false
      //  sourceFlag: false
    }
  },
  methods: {
    async addTagDialog(contentType) {
      this.confirmSource = true
      let res = await axios.get('/ui/tagwords', {
        params: {contentType: contentType}
      })
      this.tags = res.data
    },
    addSourceDialog() {},
    confirmTag() {
      this.myTagFlag = false
      this.$emit('update:tagFlag', false)
    },
    confirmSource() {
      this.mySourceFlag = false
    }
  },
  watch: {
    tagFlag(val) {
      this.myTagFlag = val
    },
    myTagFlag(val) {
    // console.log(val);
      this.$emit('update:tagFlag', val)
    },
    sourceFlag(val) {
      this.mySourceFlag = val
    },
    mySourceFlag(val) {
      this.$emit('update:sourceFlag', val)
    },
    relaContentFlag(val) {
      this.myRelaContentFlag = val
    },
    myRelaContentFlag(val) {
      this.$emit('update:relaContentFlag', val)
    }
  },
  async created() {
    if (this.tagFlag) {

    } else if (this.sourceFlag) {

    } else if (this.relaContentFlag) {
      let res = await axios.get('/ui/relacontent')
    }
  }
}
</script>
