<template>
    <el-container class="jcqkDialogInfo">
        <el-main style="height: 100%;padding: 0">
            <el-table
                ref="jcqkTable"
                :data="tableData"
                :cell-style="'border-color:#D8D8D8'"
                :header-cell-style="'border-color:#D8D8D8'"
                :span-method="arraySpanMethod"
                stripe border
                style="width: 100%">
                <el-table-column label="商机阶段" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.sjjd }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="阶段里程碑" header-align="center">
                    <template slot-scope="scope">
                        <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
                            <div>
                                <el-popover
                                    placement="right"
                                    width="150"
                                    trigger="click">
                                    <el-checkbox-group v-model="scope.row.checkList" @change="lcbShowOrHidden(scope.row)" v-if="(scope.row.sjjdTableData || []).length > 0">
                                        <el-checkbox :label="item.lcbjd" v-for="(item,index) in scope.row.sjjdTableData" :key="index"></el-checkbox>
                                    </el-checkbox-group>
                                    <span v-else>暂无数据</span>
                                    <i slot="reference" class="el-icon-setting" style="cursor: pointer;margin-right: 6px"></i>
                                </el-popover>
                                <span v-if="scope.row.jdxs">当前里程碑: <span v-html="scope.row.jdxs"></span></span>
                            </div>
                            <i class="el-icon-arrow-right" :class="[scope.row.isExpand ? 'arrow-down' : '']"
                               style="transition: all ease 0.3s;margin: 0 16px 0 6px;cursor: pointer" @click="toogleExpand(scope.row)"></i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="决策人" align="center">
                    <el-table-column label="来源" align="center"></el-table-column>
                    <el-table-column label="单位名称" align="center"></el-table-column>
                    <el-table-column label="联系人名称" align="center"></el-table-column>
                    <el-table-column label="联系人电话" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="推进情况" align="center">
                    <el-table-column label="推进状态" align="center"></el-table-column>
                    <el-table-column label="推进说明" align="center"></el-table-column>
                </el-table-column>
                <el-table-column type="expand" width="1">
                    <template slot-scope="props">
                        <el-table :data="props.row.sjjdTableData.filter(v => v.isShow)" :span-method="objectSpanMethod" class="expandTable">
                            <el-table-column></el-table-column>
                            <el-table-column align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.lcbjd }}
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.source" clearable placeholder="请选择" @change="changeSource(scope.row)">
                                        <el-option
                                            v-for="item in sourceOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.dwmc" clearable placeholder="请选择次客户" v-if="scope.row.source == '222'" style="width: 100%">
                                        <el-option
                                            v-for="item in ckhOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-input
                                        v-model="scope.row.dwmc"
                                        :disabled="true" v-else>
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.lxr" clearable filterable allow-create placeholder="请选择" @change="chooseLxr(scope.row)">
                                        <el-option
                                            v-for="item in lxrOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.tel" placeholder="请输入联系人电话"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.tjzt" clearable placeholder="请选择">
                                        <el-option
                                            v-for="item in tjztOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <div style="display: flex;justify-content: space-between;align-items: center">
                                      <span style="overflow: hidden;flex-shrink: 1;white-space: nowrap;text-overflow: ellipsis">{{ scope.row.zxtjnr }}</span>
                                      <i class="el-icon-edit" v-if="scope.row.tjzt == '进行中'"></i>
                                    </div>

                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>

export default {
    name: "jcqkDialog",
    props: {
    },
    components: {
    },
    data() {
        return {
            tableData:[
                {
                    sjjd:'线索'
                },
                {
                    sjjd:'商机立项'
                },
                {
                    sjjd:'需求引导'
                },
                {
                    sjjd:'促成立项'
                },
                {
                    sjjd:'力争中标'
                },
                {
                    sjjd:'合同签订'
                },
            ],
            mergeRowsNum:0,
            sourceOptions:[
                {
                  value:'111',
                  label:'主客户'
                },
                {
                  value:'222',
                  label:'次客户'
                },
                {
                  value:'333',
                  label:'协同单位'
                },
            ],
            ckhOptions:[
              {
                value:'c1',
                label:'次客户1'
              },
              {
                value:'c2',
                label:'次客户2'
              },
            ],
            lxrOptions:[
              {
                value:'lxr1',
                label:'联系人1',
                tel:'111111111'
              },
              {
                value:'lxr2',
                label:'联系人2',
                tel:'22222222222'
              },
            ],
            tjztOptions:[
              {
                value:'已完成',
                label:'已完成'
              },
              {
                value:'进行中',
                label:'进行中'
              },
              {
                value:'未开始',
                label:'未开始'
              },
              {
                value:'已废弃',
                label:'已废弃'
              }
            ],
        };
    },
    watch: {

    },
    computed: {

    },
    created() {
      // let queryParamsLXR = [{"controlType":"viewList","key":"dd8ea829e1b411ed91841df742bd908b","operate":"like","value":this.商机id}]
      // this.axios.post(this.api.plCommonmethod.findDataAndDetailsNew,{//联系人信息获取
      //   formId: 'd23c7807cf8d11ed8be415fd3b8fe8a2',
      //   listViewId: 'e28d6902cf8d11ed8be40b74ecca9869',
      //   queryParams: JSON.stringify(queryParamsLXR),
      //   'currentPage':0,'rows':0
      // }).then(res => {
      //   if(res && res.data && res.data.datas){
      //     this.lxrInfoArr = res.data.datas || [];
      //   }
      // })

        this.initTableData();
    },
    mounted() {

    },
    methods: {
        initTableData() {
            this.tableData.forEach(item => {
                this.$set(item,'isExpand',false)
                this.$set(item,'jdxs','')
                this.$set(item,'checkList',['规划','立项资料','资金确认'])
                let arr = [
                    {
                        lcbjd:'规划',
                        source:'',//来源
                        dwmc:'',
                        lxr:'',
                        tel:'',
                        tjzt:'',
                        zxtjnr:''
                    },
                    {
                        lcbjd:'立项资料',
                        source:'',//来源
                        dwmc:'',
                        lxr:'',
                        tel:'',
                        tjzt:'',
                        zxtjnr:''
                    },
                    {
                        lcbjd:'资金确认',
                        source:'',//来源
                        dwmc:'',
                        lxr:'',
                        tel:'',
                        tjzt:'',
                        zxtjnr:''
                    }
                ]
                this.$set(item,'sjjdTableData',arr)
            })

          //'queryParams': "sssjid='"+this.+"'",
            if(true){
                this.axios.post(this.api.plCommonmethod.findDataByFormIdNoLogin,{'formId':'98f0c041f51b11ed8c71e1955d50ced7',
                order:'SX ASC','currentPage':0,'rows':0}).then(res => {
                    if(res && res.data && res.data.operateSuccess) {
                        console.log(res,111)
                        this.tableData.forEach(item => {
                            // this.$set(item,'checkList',[])
                            res.data.operateObj.forEach(key => {
                                let obj = {};
                                if(item.sjjd == key.SJJD){
                                    if(key.SFXSLCB){
                                        let newArr = []
                                        item.checkList.forEach(eachCheck => {
                                            if(eachCheck != key.JDLCB){
                                                newArr.push(eachCheck)
                                            }
                                        })
                                        // this.$set(item,'checkList',newArr)
                                        item.checkList = newArr;
                                    }
                                    if(key.TJZT == '进行中'){
                                        item.jdxs += (key.JDLCB + "<span style='color:white;background-color: #E6A23C;padding: 3px;border-radius: 6px'>进行中</span>:" + key.JCRLXRMC +'(' + key.JCRLXDH + ')')
                                    }
                                    item.sjjdTableData.forEach(sjjdItem => {
                                        if(sjjdItem.lcbjd == key.JDLCB){
                                            this.$set(sjjdItem,'source',key.JCRLY)
                                            this.$set(sjjdItem,'dwmc',key.JCRDWMC)
                                            this.$set(sjjdItem,'lxr',key.JCRLXRMC)
                                            this.$set(sjjdItem,'tel',key.JCRLXDH)
                                            this.$set(sjjdItem,'tjzt',key.TJZT)
                                            this.$set(sjjdItem,'zxtjnr',key.ZXTJNR)
                                        }
                                    })
                                }
                            })
                        })
                        this.tableData.forEach(tableItem => {
                          this.lcbShowOrHidden(tableItem);
                        });
                    }
                })
            } else {
                this.tableData.forEach(tableItem => {
                    this.lcbShowOrHidden(tableItem);
                });
            }
        },
        changeSource(val){
            val.lxr = '';
            val.tel = '';
        },
        arraySpanMethod({row,column,rowIndex,columnIndex}){
            if(columnIndex == 1){
                return [1,7];
            } else if(columnIndex > 1 && columnIndex < 6){
                return [0,0];
            }
        },
        objectSpanMethod({row,column,rowIndex,columnIndex}){
            if(columnIndex == 0){
                if(rowIndex == 0){
                    return [this.mergeRowsNum,1];
                }else{
                    return [0,0];
                }
            }
        },
        toogleExpand(row) {
            let vm = this;
            vm.mergeRowsNum = (row.sjjdTableData || []).length;
            vm.$set(row, "isExpand", !row.isExpand);
            vm.tableData.map((item) => {
              if (row.sjjd != item.sjjd) {
                vm.$set(item, "isExpand", false);
                vm.$nextTick(() => {
                  vm.$refs.jcqkTable.toggleRowExpansion(item, false);
                });
              }
            });
            vm.$nextTick(() => {
              vm.$refs.jcqkTable.toggleRowExpansion(row);
            });
        },
        chooseLxr(val){
            this.lxrOptions.forEach(item => {
                if(item.value == val.lxr){
                  val.tel = item.tel;
                }
            })
        },
        lcbShowOrHidden(val){
            let vm = this;
            (val.sjjdTableData || []).forEach(item => {
                vm.$set(item,'isShow',false);
            })
            vm.isHid(val);

        },
        isHid(ii){
            let vm = this;
            (ii.sjjdTableData || []).forEach(item => {
                (ii.checkList || []).forEach( key => {
                    if(key == item.lcbjd){
                        vm.$set(item,'isShow',true);
                    }
                })
            })
        }
    }
}
</script>

<style scoped lang="scss">
.jcqkDialogInfo {
    height: 100%;
    ::v-deep .el-table thead.is-group th.el-table__cell {
        background-color: #F2F2F2;
        color: #333333;
    }
    .arrow-down {
      transform: rotateZ(90deg);
    }
    ::v-deep .el-table__expanded-cell {
        padding: 0;
        .el-table__header-wrapper {
            display: none;
        }
    }
    .expandTable{
        ::v-deep .el-input__inner {
            height: 30px;
            line-height: 30px;
        }
        ::v-deep .el-input__icon {
            line-height: 30px;
        }
        ::v-deep .el-table__cell {
            padding:9px 0;
        }
    }
}

</style>
