<script>
import {itemAction,itemPreAction} from '@/api/order'

import {index as merchantIndex} from '@/api/merchant'
import {index as productIndex} from '@/api/product'
import { Message } from 'element-ui'
export default {
  props:{
    row:Object
  },
  data() {
    return {
      icons:{
        follow:'ios-chatbubbles-outline',
        assign:'ios-paper-plane-outline',
        recover:'md-redo',
        cancel:'ios-close',
        confirm_merchant_cancel:'ios-close-circle',
        confirm_member_cancel:'md-close-circle'
      },
      isShow:false,
      action:'',
      content:'',
      operations:{},
      operationsLen:false,
      manuallyRefundFee:0,
      form:{
        follow:{
          content:'',
          merchant_id:"",
          product_id:"",
          merchant_name:"",
          product_name:"",
          manually_refund_fee:''
        }
      }
    }
  },
  methods: {
    view(e){
      this.isShow = e
    },
    actionRender(){
      if(!this.row?.admin_actions) return
      // if(this.row.order_state=='finished'&&this.row.state=='canceled_by_merchant'){
      //   this.row.admin_actions['confirm_merchant_cancel'] = '确认商家无效单'

      //    // console.log(this.row.order_state&&this.row.state,this.row.admin_actions)
      // }
      let keys = Object.keys(this.row.admin_actions)
      // console.log(keys)
      return keys.map(item => {
        return (
          <Button
            icon={this.icons[item]}
            type="primary"
            style="margin-left: 10px;margin-bottom: 6px;"
            size="small"
            ghost
            on-click={()=>this.actionPreClick(item)}>
            {this.row.admin_actions[item]}
          </Button>
        )
      })
    },
      handleSelectProduct(item) {
        this.form.follow.product_id = item.id;
      },
    querySearchAsyncProduct(queryString,cb){
        productIndex({
          name: queryString,
          merchant_id:this.form.follow.merchant_id,
          page_size: 999
        }).then(res=>{
          var data = res.rows;
          let _data=[];
          for (var m of data) {
            _data.push(
            {
              value:m.name,
              id:m.id
            }
            )
          }
          cb(_data)
        })
    },
      handleSelect(item) {
        console.log(item)
        this.form.follow.merchant_id = item.id;
        this.form.follow.product_name="";
        this.form.follow.product_id="";

      },
    querySearchAsync(queryString,cb){
        merchantIndex({
          keyword: queryString,
          page_size: 999
        }).then(res=>{
          var data = res.data;
          let _data=[];
          for (var m of data) {
            _data.push(
            {
              value:m.name,
              id:m.id
            }
            )
          }
          cb(_data)
        })
    },
    contentRender(){
      if(this.action=="assign"){
        return (
          <div>
            <div style={{'display':'flex'}}>
              <div>产品名称</div>
              <div>{this.content.vo?.order?.order_name}</div>
            </div>
             <div class="action-form">
             <div class="action-form-item">
             <div class="action-form-label">商家</div>

             <div class="action-form-content">


               <el-autocomplete
                 style={{'width':'240px'}}
                 v-model={this.form.follow.merchant_name}
                 fetch-suggestions={this.querySearchAsync}
                 clearable
                 placeholder="请输入选择商家"
                 on={{
                   ['select']:(e)=>{
                     this.handleSelect(e);
                   }
                 }}></el-autocomplete>
             </div>
             </div>
             <div class="action-form-item">
             <div class="action-form-label">产品</div>

             <div class="action-form-content">

               <el-autocomplete
                 style={{'width':'240px'}}
                 clearable
                 v-model={this.form.follow.product_name}
                 fetch-suggestions={this.querySearchAsyncProduct}
                 placeholder="请输入选择产品"
                 on={{
                   ['select']:(e)=>{
                     this.handleSelectProduct(e)
                   }
                 }}></el-autocomplete>
             </div>
             </div>
             <div class="action-form-item">
                    <div class="action-form-label">内容</div>

                    <div class="action-form-content">
                      <el-input
                        style={{'width':'340px'}}
                        type="textarea"
                        rows='2'
                        clearable
                        size='small'
                 placeholder="请输入内容"
                        value={this.form.follow.content}
                        on={{
                          ['input']:(e)=>{
                            this.form.follow.content = e
                          }
                        }}>
                      </el-input>
                    </div>
              </div>
             </div>
          </div>)
      }
      else{
      return (
        <div>
          <div style={{'display':'flex'}}>
            <div>产品名称</div>
            <div>{this.content.vo?.order?.order_name}</div>
          </div>
          <div class="action-form" >
{this.operationsLen?<div class="action-form-item" >
                 <div class="action-form-label">本次分发已产生佣金</div>

                 <div class="action-form-content">
                   <el-input
                     style={{'width':'380px'}}
                     clearable
                     size='small'
              placeholder="请输入返佣金额"
                     value={this.form.follow.manually_refund_fee}
                     on={{
                       ['input']:(e)=>{
                         this.form.follow.manually_refund_fee = e
                       }
                     }}>

    <template slot="append">推荐的返佣比{this.manually_refund_fee}%</template>
                   </el-input>
                 </div>
           </div>:''}

             <div class="action-form-item">
                  <div class="action-form-label">内容</div>

                  <div class="action-form-content">
                    <el-input
                      style={{'width':'240px'}}
                      size='small' type="textarea"
                        rows='2'
                        clearable
                 placeholder="请输入内容"
                      value={this.form.follow.content}
                      on={{
                        ['input']:(e)=>{
                          this.form.follow.content = e
                        }
                      }}>
                    </el-input>
                  </div>
                </div>
              </div>
        </div>
      )
        }
    },

    actionPreClick(action){
      console.log("action",action)
      this.action = action;
      if(this.row.merchant){
        this.form.follow.merchant_id=this.row.merchant.id;
        this.form.follow.merchant_name=this.row.merchant.name;
      }


      if(this.row.product){
      this.form.follow.product_id=this.row.product.id;
      this.form.follow.product_name=this.row.product.name;
      }

      itemPreAction({
        item_id:this.row.id,
        action
      }).then(res => {
        this.content = res
        console.log(this.content)
        this.isShow = true;
        this.operations=res.operations;

      if(JSON.stringify(this.operations)!="{}"&&this.operations.length!=0){
        let manually_refund_fee=0;
        let data=this.operations;
        Object.keys(data).map((key,item)=>{
                console.log(key,data[key]);//key=>属性名    data[key]=>属性=
                manually_refund_fee=data[key]?.fee_ratio;
        });
        console.log("manually_refund_fee",(manually_refund_fee/100))
        console.log("res.vo.current_assigned_fee",res.vo.current_assigned_fee)
        this.form.follow.manually_refund_fee=(manually_refund_fee/100)*res.vo.current_assigned_fee;
        this.manually_refund_fee=manually_refund_fee;
        this.operationsLen=true;
        }
        else this.operationsLen=false;

      })
    },
    actionClick(){
      let data ;
      switch (this.action){
        case "assign":
        data = {
            item_id:this.row.id,
            action:this.action,
            remark:this.form.follow.content,
            merchant_id:this.form.follow.merchant_id,
            product_id:this.form.follow.product_id,
          }
        break
        default:
        data = {
            item_id:this.row.id,
            action:this.action,
            remark:this.form.follow.content
          }
        if(this.operationsLen){
          data.manually_refund_fee=this.form.follow.manually_refund_fee;
        }
        break;
      }
      itemAction(data).then(res => {
        console.log(res)
        Message({
          type:'success',
          message:res.msg || '操作成功'
        })
        this.isShow = false
        this.$emit('refresh')
      })
    }
  },
  render(h) {
    let {actionRender,contentRender} = this
    return (
      <div>
        { actionRender() }
        <Button
          icon="ios-clipboard-outline"
          type="primary"
          style="margin-left: 10px;margin-bottom: 6px;"
          size="small"
          ghost
          on-click={()=>{
            this.$emit('log')
          }}>日志</Button>

        <xy-dialog
          width={40}
          title={this.row.admin_actions[this.action] || '操作'}
          is-show={this.isShow}
          type="normal"
          on={{
            ['update:isShow']: this.view,
            ['on-ok']:this.actionClick
          }}
          scopedSlots={{
            default:contentRender
          }}>

        </xy-dialog>
      </div>
    )
  }

}
</script>

<style scoped lang="scss">
.action-form{
  display: flex;
  flex-direction: column;
 &-item{

  display: flex;
  flex-direction: row;
  align-items: center;
 }
  &-label{

  }
  &-content{
    padding: 6px 10px;
  }
}
</style>
