<template>
  <div>
    <el-button size="mini" type="text" @click="detailBtn">明 细</el-button>
    <el-dialog title="新 建" :visible.sync="dialogFormVisible" width="65%">
      <div slot="title" style="font-size: 15px">
        明细详情
      </div>
      <add :data="data" @onSuccess="getTagDetail" v-if="tool.checkAuth($route.name,'insert')"/>
       <tableLayout v-if="tagDetail" :layout="tablecols" :data="tagDetail" :custom="true" height="50vh">
         <template v-slot:customcol="scope">
           <div v-if="scope.column.columnname == 'mutextags'">
             <span v-if="scope.column.data[scope.column.columnname].length > 0">
               <span v-for="(item,index) in scope.column.data[scope.column.columnname]" :key="index">
                 {{item.tag}}
               </span>
             </span>
             <span v-else>--</span>
           </div>
           <div v-else>{{scope.column.data[scope.column.columnname]}}</div>
         </template>
         <template v-slot:opreation="scope">
           <mutextage 
            class="inline-16" 
            :tagData="data" 
            :allData="tagDetail.filter(item=>item.tag!=scope.data.tag)" 
            :rowData="scope.data"
            @onSuccess="getTagDetail()"/>
           <el-button type="text" @click="deleteRow(scope.data)" size="small" v-if="tool.checkAuth($route.name,'delete')">删除</el-button>
         </template>
       </tableLayout>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import add from './add'
import mutextage from './mutextage'
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: "detail",
  props:['data'],
  components:{add,mutextage},
  data(){
    return {
      dialogFormVisible:false,
      isordercheck:true,
      isusedcheck:false,
      form:{
       
      },
      tablecols:'',
      tagDetail:'',
      currentData:'',
      rules:{
        accountno:[
          { required: true, message: '输入账户编号', trigger: 'blur'},
        ],
        accountname:[
          { required: true, message: '输入账户名称', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name).dataTagDetailTable.tablecols
    
    
  },
  methods:{
    detailBtn () {
      this.dialogFormVisible = true
      this.currentData = this.data
      this.getTagDetail()
    },
    onSubmit(){
      console.log(this.form)
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20221008134703",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
      })
    },
    async deleteRow (data) {
      console.log(data);
      let res = await this.$api.requested({
        "id": 20221013104601,
        "content": {
          "sys_systemtagid": this.data.sys_systemtagid,
          "tags":[data.tag]
        }
      })
      console.log(res);
      this.tool.showMessage(res,() => {
        this.getTagDetail()
      })
    },
    async getTagDetail () {
      let res = await this.$api.requested({
        "id": 20221013104401,
        "content": {
          "nocache":true,
          "sys_systemtagid": this.data.sys_systemtagid
        }
      })
      this.tagDetail = res.data
      console.log(this.tagDetail);
      
    }
  }
}
</script>

<style scoped>

</style>