<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="负责的" name="负责的">
        <div style="margin-bottom: 15px">
          <add  class="inline-16"  @addSuccess="leaderData"></add>
<!--          <el-input  style="width:200px;" placeholder="搜索" :suffix-icon="leader.params.content.where.condition?leader.params.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="leader.params.content.where.condition"
                     @keyup.native.enter="leaderData(leader.params.content.pageNumber = 1)" @clear="leaderData(leader.params.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
          </el-input>-->
        </div>
        <div style="margin-top: 15px">
          <tableLayout ref="multipleTable" :layout="tablecols" :data="leader.list" :opwidth="200" :custom="true"  fixedName="operation">
            <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname === 'operation'">
                <span>{{scope.column.data[scope.column.columnname]}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'editable'">
                <span>{{scope.column.data[scope.column.columnname] === 1 ? '是' : '否'}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'userrole'">
                <span style="margin-left: 10px" v-for="(item,index) in scope.column.data.userrole">
                    <span v-if="scope.column.data.userrole.length -1 === index">{{item.rolename}}</span>
                    <span v-else>{{item.rolename + ','}}</span>
                  </span>
              </div>
              <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
            </template>
            <template v-slot:opreation="scope">
                <el-button slot="reference" type="text" size="mini" class="inline-16" @click="onEdit(scope.data)">设置</el-button>
                <el-popconfirm
                    title="确定删除该团队人员吗？"
                    @confirm="onDel(scope.data)"
                >
                  <el-button slot="reference" class="inline-16" type="text" size="mini">删除</el-button>
                </el-popconfirm>
            </template>
          </tableLayout>
        </div>
      </el-tab-pane>
      <el-tab-pane label="参与的" name="参与的">
        <div style="margin-top: 15px">
          <tableLayout ref="partakeTable" :layout="tablecolsPartake" :data="partake.list" :opwidth="200" :custom="true"  fixedName="operation">
            <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname === 'operation'">
                <span>{{scope.column.data[scope.column.columnname]}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'editable'">
                <span>{{scope.column.data[scope.column.columnname] === 1 ? '是' : '否'}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'userrole'">
                <span style="margin-left: 10px" v-for="(item,index) in scope.column.data.userrole">
                    <span v-if="scope.column.data.userrole.length -1 === index">{{item.rolename}}</span>
                    <span v-else>{{item.rolename + ','}}</span>
                  </span>
              </div>
              <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
            </template>
            <template v-slot:opreation="scope">
              <detail :data="scope.data"></detail>
            </template>
          </tableLayout>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="设置" :visible.sync="dialogTableVisible" append-to-body width="400px">
      <el-radio v-model="isEdit" label="1"  >允许编辑</el-radio>
      <el-radio v-model="isEdit" label="0" >不允许编辑</el-radio>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import add from './add'
import detail from './detail'
export default {
  name: "index",
  components:{add,detail},
  data(){
    return {
      tablecols:[],
      tablecolsPartake:[],
      dialogTableVisible:false,
      activeName: '负责的',
      radio:'1',
      leader:{
        params:{
          "id": 20230302174201,
          "content": {
            "leaderuserid":""
          }
        },
        list:[],
        total:0,
        currentPage:0,
      },
      partake:{
        params:{
          "id": 20230302174501,
          "content": {
            "leaderuserid":""
          }
        },
        list:[],
        total:0,
        currentPage:0,
      },
      row:'',
      isEdit:''
    }
  },
  methods:{
    /*我负责的*/
    async leaderData(){
      this.leader.params.content.leaderuserid = this.$route.query.id
      const res = await this.$api.requested(this.leader.params)
      this.leader.list = res.data
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.multipleTable.$refs.table.doLayout()
        });
      }, 300);
    },
    /*我参与的*/
    async partakeData(){
      this.partake.params.content.leaderuserid = this.$route.query.id
      const res = await this.$api.requested(this.partake.params)
      this.partake.list = res.data
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.partakeTable.$refs.table.doLayout()
        });
      }, 300);
    },
    handleClick(){
      if (this.activeName === '负责的'){
        this.leaderData()
      }else {
        this.partakeData()
      }
    },
    onEdit(row){
      this.row = row
      this.isEdit = row.editable
      if (this.isEdit === 1){
        this.isEdit = '1'
      }else {
        this.isEdit = '0'
      }
      console.log(this.row)
      this.dialogTableVisible = true
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.leader.params.content.pageSize = val
      this.leaderData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.leader.params.content.pageNumber = val
      this.leaderData()
    },
    editClick(){
      this.editShow = true
    },
    async onSubmit(){
      if (this.isEdit === '1'){
        this.isEdit = 1
      }else {
        this.isEdit = 0
      }
      const res = await this.$api.requested({
        "id":"20230302174301",
        "content":{
          "editable":this.isEdit,
          "userid":this.row.userid,
          "leaderuserid":this.$route.query.id
        }
      })
      this.tool.showMessage(res,()=>{
        this.dialogTableVisible = false
        this.leaderData()
      })
    },
    async onDel(row){
      const res = await this.$api.requested({
        "id":"20230302174401",
        "content":{
          "userid":row.userid,
          "leaderuserid":this.$route.query.id
        }
      })
      this.tool.showMessage(res,()=>{
        this.dialogTableVisible = false
        this.leaderData()
      })
    }
  },
  mounted() {
    this.leaderData()
    this.partakeData()
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).teamTable.tablecols
    /*partakeTeamTable*/
    this.tablecolsPartake = this.tool.tabelCol(this.$route.name).partakeTeamTable.tablecols
  }
}
</script>

<style scoped>

</style>